如何更改工具提示上的背景颜色？ [复制]答案

【问题标题】：How to change background color on tooltip? [duplicate]如何更改工具提示上的背景颜色？ [复制]
【发布时间】：2019-03-03 13:42:08
【问题描述】：

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

【问题讨论】：

现在背景色是怎么设置的？向我们展示那个 CSS。
这个问题已经回答here
这与问题没有直接关系，但仍然需要注意：请注意id 是唯一标识符，这意味着您不得有两个页面上具有相同id 值的多个元素。因此，如果您使用显示的代码，每个 html 文档可能只有一个工具提示。
看看这个答案：stackoverflow.com/a/38279489/3554107。对于每个方向箭头的样式，我们必须使用 CSS 属性选择器选择每个箭头，然后单独设置它们。

标签： css twitter-bootstrap tooltip

【解决方案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

【讨论】：

应尽可能避免使用!important。
要覆盖，请不要使用important!。声明 Bootstrap 用来设置样式的相同选择器，并确保在 Bootstrap 的 CSS 之后加载您的定义。
感谢它对背景颜色的帮助，但箭头仍然显示黑色，另一件事我现在如何调整工具提示的高度，它会上升并与其他 html 元素重叠。

【解决方案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; 
}

【讨论】：