如何在工具提示上更改背景颜色？ [重复]

Question

这个问题已经在这里有了答案：

• 更改Bootstrap工具提示颜色 29个答案

当我将鼠标悬停在（i）工具提示上时，背景颜色显示为黑色，当用户将鼠标悬停在工具提示上时，如何将背景颜色更改为蓝色。

到目前为止尝试过的代码

glyphicon.html

<label for="epcfLevel3Name" class="col-md-5 required">EPCF:<span tooltip="{{epcfObj.epcfToolTip}}" id="tooltip" class="glyphicon glyphicon-info-sign pull-right"></span></label>

的CSS

#tooltip {
    position: relative;
    color: #66CCFF;
}

Answer 1

尝试这个：

工具提示

.tooltip-inner {
    color: #fff;
    background: #FF9900;
}

工具提示箭头

.tooltip.top .tooltip-arrow { border-top-color: #FF9900; }
.tooltip.right .tooltip-arrow { border-right-color: #FF9900; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #FF9900; }
.tooltip.left .tooltip-arrow { border-left-color: #FF9900; }

注意：要覆盖设置！重要

Answer 2

模板字符串

 <div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div> 

创建工具提示时要使用的基本HTML。

工具提示的标题将注入.tooltip-inner 。 .tooltip-arrow将成为工具提示的箭头。 最.tooltip包装器元素应具有.tooltip类。
http://getbootstrap.com/javascript/#tooltips

回答你的问题

当用户将鼠标悬停在工具提示上时，如何将背景颜色更改为蓝色？

使用.tooltip-inner和tooltop-arrow选择器设置工具提示的样式。 .tooltip选择器应单独放置。

例如

（ 演示 ）

.tooltip-inner {
    background: #66CCFF;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #66CCFF; 
}
.tooltip.left .tooltip-arrow { 
    border-left-color: #66CCFF; 
}
.tooltip.right .tooltip-arrow { 
    border-right-color: #66CCFF; 
}
.tooltip.bottom .tooltip-arrow { 
    border-bottom-color: #66CCFF; 
}