Question

我正在尝试修改工具提示背景颜色和字体颜色。

我有：

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();
});

在这种情况下一切正常，但是当我添加data-container =＆＃34; body＆＃34;到html工具提示背景颜色返回默认值。

<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>

Answer 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;
}

Booststrap工具提示和数据容器

1 个答案: