使用Bootstrap v3.0.2的造型工具提示

我使用的是Boostrap v3.0.2，我想提出工具提示，但其風格有點不同。我想讓工具提示背景顏色爲黑色，使其具有小填充並位於右側。現在使用Bootstrap v3.0.2的造型工具提示

，它看起來就像是：

我的代碼如下：

$(document).ready(function() { 
 
    $('[data-toggle="tooltip"]').tooltip(); 
 
     });

.tooltip .tooltip-inner { 
 
     max-width: 200px; 
 
     padding: 1px 3px; 
 
     color: #fff; 
 
     text-align: center; 
 
     background-color: #000; 
 
     border-radius: 3px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
 
    
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
     
 
     <span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="top" title="Remove"></span>

我試圖改變它以這種方式，但沒有更改：

.remove-file .tooltip .tooltip-inner {background-color: black !important;}

來源

2016-09-05 mistery_girl

這是工作好，看到演示。

$(document).ready(function() { 
 
    $('[data-toggle="tooltip"]').tooltip(); 
 
});

.tooltip .tooltip-inner { 
 
    
 
    max-width: 200px; 
 
    padding: 1px 3px; 
 
    color: #fff; 
 
    text-align: center; 
 
    background-color: #000; 
 
    border-radius: 3px; 
 
} 
 

 
.remove-file { 
 
    display: block; 
 
    margin: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
    
 

 
    <span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="right" title="This is Working correctly"></span>

來源

2016-09-05 09:39:29

感謝您的回答，但沒有任何變化。 –

它不chante，我甚至把'！important'，我的自定義css是Bootstrap CSS後，但它是與背景顏色：白色，位於文本下方。 –

@mistery_girl您的代碼段無效，請解決。 –

首先，你需要把引導的css文件下方的外部CSS文件，那麼它會覆蓋默認的CSS，那麼你只需要進行顏色變化在類如：

.tooltip-inner{ 
    background:red; 
    }

來源

2016-09-05 09:54:21

使用Bootstrap v3.0.2的造型工具提示

回答

相關問題