If you utilize tooltips, it may be beneficial to use the pre-defined theme colors like info, success, danger, and warning. Despite Bootstrap lacking built-in support for tooltip themes (in Version 3 at the time of writing), we can implement a few lines of CSS to accomplish this.
Essentially, what is desired are classes such as tooltip-info
, tooltip-danger
, tooltip-success
, etc., which can be applied to the elements where you invoke tooltip()
. The code provided below achieves exactly this and has been tested with Bootstrap 3.0.
Outcome
How It Functions
The following code repurposes styles from the alert component since it closely resembles tooltips. By doing so, there are several benefits, including not only changing the background color but also altering the text color and border color. Additionally, this imparts a slightly transparent glossy appearance to the tooltip. The tooltip's arrow depends on the border color, so this aspect is adjusted separately by inheriting the alert component's border color.
Note that these changes are not applied globally. If the tooltip-info
classes are not used, the default tooltip appearance will be retained.
Utilization
<span class="tooltip-info" title="Hello, I'm dangerous">
Hover here to see the tooltip!
</span>
Keep in mind that Bootstrap tooltips require activation, similar to the example provided here ()
$(document.body).tooltip({ selector: "[title]" });
Fiddle
Experiment with this code snippet here: http://jsbin.com/usIyoGUD/3/edit?html,css,output
LESS CSS Source
//Import these from your own Bootstrap directory
@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);
}
Compiled CSS
If you are not utilizing LESS or prefer to avoid dealing with it, you can directly employ the compiled CSS detailed below:
.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;
}