如果您使用工具提示,您可能希望使用内置主题颜色,即信息、成功、危险和警告。然而,Bootstrap 不支持工具提示主题(在撰写本文时为 V3),但我们可以添加几行 CSS 来实现这一点。
理想情况下,我们想要的是一组类tooltip-info
,tooltip-danger
等等tooltip-success
,您可以将它们应用于您正在调用的元素tooltip()
。我将在下面给出完全符合此要求的代码,并使用 Bootstrap 3.0 进行测试。
结果
它是如何工作的
下面的代码基本上重用了警报组件的样式,因为它与工具提示非常相似。请注意,这样做几乎没有什么好处,包括不仅背景颜色会发生变化,而且文本颜色和边框颜色也会发生变化。此外,它使工具提示具有略微透明的光泽外观。工具提示中的箭头取决于边框颜色,因此可以通过继承警报组件的边框颜色来单独更改。
另请注意,这些不是全局更改。tooltip-info
除非您像获得默认工具提示一样应用类。
用法
<span class="tooltip-info" title="Hello, I'm dangerous">
Hover here to see tooltip!
</span>
请注意,默认情况下不激活引导工具提示,因此您需要像这样激活(请参阅https://stackoverflow.com/a/20877657/207661)
$(document.body).tooltip({ selector: "[title]" });
小提琴
在这里玩这个代码:http: //jsbin.com/usIyoGUD/3/edit ?html,css,output
更少的 CSS 源代码
//Import these from your own Bootstrap folder
@import "js/ext/bootstrap/less/mixins.less";
@import "js/ext/bootstrap/less/variables.less";
.tooltip-border-styles(@borderColor) {
& + .tooltip {
&.top .tooltip-arrow,
&.top-left .tooltip-arrow,
&.top-right .tooltip-arrow {
border-top-color: @borderColor;
}
&.bottom .tooltip-arrow,
&.bottom-left .tooltip-arrow,
&.bottom-right .tooltip-arrow {
border-bottom-color: @borderColor;
}
&.right .tooltip-arrow {
border-right-color: @borderColor;
}
&.left .tooltip-arrow {
border-left-color: @borderColor;
}
}
}
.tooltip-info {
& + .tooltip .tooltip-inner {
.alert-info;
}
.tooltip-border-styles(@alert-info-border);
}
.tooltip-danger {
& + .tooltip .tooltip-inner {
.alert-danger;
}
.tooltip-border-styles(@alert-danger-border);
}
.tooltip-warning {
& + .tooltip .tooltip-inner {
.alert-warning;
}
.tooltip-border-styles(@alert-warning-border);
}
.tooltip-success {
& + .tooltip .tooltip-inner {
.alert-success;
}
.tooltip-border-styles(@alert-success-border);
}
编译的 CSS
如果你不使用 LESS 或者不想处理它,那么你可以直接使用下面编译的 CSS:
.tooltip-info + .tooltip .tooltip-inner {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
background-repeat: repeat-x;
border-color: #9acfea;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}
.tooltip-info + .tooltip.top .tooltip-arrow,
.tooltip-info + .tooltip.top-left .tooltip-arrow,
.tooltip-info + .tooltip.top-right .tooltip-arrow {
border-top-color: #bce8f1;
}
.tooltip-info + .tooltip.bottom .tooltip-arrow,
.tooltip-info + .tooltip.bottom-left .tooltip-arrow,
.tooltip-info + .tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #bce8f1;
}
.tooltip-info + .tooltip.right .tooltip-arrow {
border-right-color: #bce8f1;
}
.tooltip-info + .tooltip.left .tooltip-arrow {
border-left-color: #bce8f1;
}
.tooltip-danger + .tooltip .tooltip-inner {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
background-repeat: repeat-x;
border-color: #dca7a7;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
}
.tooltip-danger + .tooltip.top .tooltip-arrow,
.tooltip-danger + .tooltip.top-left .tooltip-arrow,
.tooltip-danger + .tooltip.top-right .tooltip-arrow {
border-top-color: #ebccd1;
}
.tooltip-danger + .tooltip.bottom .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-left .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #ebccd1;
}
.tooltip-danger + .tooltip.right .tooltip-arrow {
border-right-color: #ebccd1;
}
.tooltip-danger + .tooltip.left .tooltip-arrow {
border-left-color: #ebccd1;
}
.tooltip-warning + .tooltip .tooltip-inner {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
background-repeat: repeat-x;
border-color: #f5e79e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.tooltip-warning + .tooltip.top .tooltip-arrow,
.tooltip-warning + .tooltip.top-left .tooltip-arrow,
.tooltip-warning + .tooltip.top-right .tooltip-arrow {
border-top-color: #faebcc;
}
.tooltip-warning + .tooltip.bottom .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-left .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #faebcc;
}
.tooltip-warning + .tooltip.right .tooltip-arrow {
border-right-color: #faebcc;
}
.tooltip-warning + .tooltip.left .tooltip-arrow {
border-left-color: #faebcc;
}
.tooltip-success + .tooltip .tooltip-inner {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
background-repeat: repeat-x;
border-color: #b2dba1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
}
.tooltip-success + .tooltip.top .tooltip-arrow,
.tooltip-success + .tooltip.top-left .tooltip-arrow,
.tooltip-success + .tooltip.top-right .tooltip-arrow {
border-top-color: #d6e9c6;
}
.tooltip-success + .tooltip.bottom .tooltip-arrow,
.tooltip-success + .tooltip.bottom-left .tooltip-arrow,
.tooltip-success + .tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #d6e9c6;
}
.tooltip-success + .tooltip.right .tooltip-arrow {
border-right-color: #d6e9c6;
}
.tooltip-success + .tooltip.left .tooltip-arrow {
border-left-color: #d6e9c6;
}