Question

当我将鼠标悬停在（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; }

注意：要覆盖set！important

Answer 2

模板字符串
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>
创建工具提示时使用的基本HTML。

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

回答你的问题

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

使用.tooltip-inner和tooltop-arrow选择器设置工具提示的样式。 .tooltip选择器应该保持不变。

例如

（Demo）

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

如何在工具提示上更改背景颜色？

2 个答案:

回答你的问题

例如