2017-04-27 21 views
0

我正在嘗試修改工具提示背景顏色和字體顏色。Booststrap工具提示和數據容器

我:

HTML:

<table border="2px"> 
<tr> 
    <td data-toggle="tooltip" data-placement="bottom" 
      title="" data-original-title="Tooltip on bottom" 
     class="red-tooltip">Tooltip on bottom 
    </td> 
</tr> 
</table> 

CSS:

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;} 

JS:

$(document).ready(function(){ 
    $("td").tooltip(); 
}); 

在這種情況下,一切工作正常,但當我添加數據 - 容器=「body」html t ooltip背景顏色恢復爲默認值。

<table border="2px"> 
<tr> 
    <td data-toggle="tooltip" data-placement="bottom" 
    title="" data-original-title="Tooltip on bottom" 
data-container="body" class="red-tooltip">Tooltip on bottom 
    </td> 
</tr> 
</table> 

回答

1

在這裏,你走了,這是我的版本

.tooltip .tooltip-inner { 
background: #f00; 
color: #fff; 
text-transform: uppercase; 
font-size: 12px; 
} 
.tooltip .tooltip-inner:before, .tooltip .tooltip-inner:after { 
border-bottom: 8px solid #f00 !important; 
border-left: 8px solid transparent !important; 
border-right: 8px solid transparent !important; 
top: -7px !important; 
}