I am trying to output various colors for the tooltips (edit: from Twitter Bootstrap) but it seems I'm not quite getting it. Just changing the default color hasn't been hard, it's just a matter of changing the colors for .tooltip and its associated definitions.
However assuming I wanted to change the color for a specific tooltip within the body
<div id="users" class="row">
<div id="photo_stack" class="span6 photo_stack">
<img id="photo1" src="" width="400px" height="300px" alt="" rel="tooltip" data-placement="right" title="Other Color" />
A simple approach like
#users .tooltip { background-color: #somecolor; }
doesn't seem to work. I guess it's something about the DOM and I'd need to attach some sort of classes to the specific tooltips? Or am I completely off? Thanks :)
Here's a JSFiddle: http://jsfiddle.net/rZxrm/
Twitter bootstrap does not have this feature built in, but you could add your own functions to do this, like so:
$('#photo1').hover(function() {$('.tooltip').addClass('tooltipPhoto')}, function () {$('.tooltip').removeClass('tooltipPhoto')});
and then you just have to define tooltipPhoto class in CSS to have a different background color.
EDIT:
Updated solution:
function changeTooltipColorTo(color) {
$('.tooltip-inner').css('background-color', color)
$('.tooltip.top .tooltip-arrow').css('border-top-color', color);
$('.tooltip.right .tooltip-arrow').css('border-right-color', color);
$('.tooltip.left .tooltip-arrow').css('border-left-color', color);
$('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color);
}
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
$('#photo1').hover(function() {changeTooltipColorTo('#f00')});
$('#photo2').hover(function() {changeTooltipColorTo('#0f0')});
$('#photo3').hover(function() {changeTooltipColorTo('#00f')});
});
If you are using tooltip, you might want to use built-in theme colors which are info, success, danger and warning. However Bootstrap does not have support for themes for tooltips (in V3 at the time of writing) but we can add few lines of CSS to achieve this.
Ideally what we want is set of classes tooltip-info, tooltip-danger, tooltip-success etc that you can apply to element you are invoking tooltip(). I'll give code below that does exactly this and is tested with Bootstrap 3.0.
Result
How does it work
Below code basically reuses styles for alert component as it is very similar to tooltip. Notice that doing so has few advantages including the fact that not only background color is changes but text color as well as border color is changed too. Plus it gives the tooltip slightly transparent glossy look. The arrow in the tooltip depends on border color so that is changed separately by inheriting alert component's border color.
Also note that these are not global changes. Unless you apply classes like tooltip-info you get the default tooltip.
Usage
<span class="tooltip-info" title="Hello, I'm dangerous">
Hover here to see tooltip!
</span>
Note that Bootstrap tooltips are not activated by default so you need activation like this (see https://stackoverflow.com/a/20877657/207661)
$(document.body).tooltip({ selector: "[title]" });
Fiddle
Play with this code here: http://jsbin.com/usIyoGUD/3/edit?html,css,output
LESS CSS Source
//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);
}
Compiled CSS
If you are not using LESS or don't want to deal with it then you can use below compiled CSS directly:
.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;
}
I have found another solution for your problem (I was trying to do the same thing). Simply change the color in your main CSS stylesheet (it will override bootstrap's as long as your stylesheet is listed after bootstrap in the head of your doc).
Specifically here's what you add to your main stylesheet (as an example):
.tooltip-inner {
background-color: #D13127;
color: #fff;
}
.tooltip.top .tooltip-arrow {
border-top-color: #D13127;
}
See Dynamically add a class to Bootstrap's 'popover' container
Her fix allows a data-class selector by modifying bootstrap.js with one line
Here is how I do it in sass
.tooltip-inner
color: #fff
background-color: #111
border: 1px solid #fff
.tooltip.in
opacity: .9
And the position dependent part
.tooltip.bottom .tooltip-arrow
border-bottom-color: #fff
See my reply to a similar question: Change bootstrap tooltip color
It is applicable to style tooltips of the existing and dynamically created elements, using Bootstrap 3 or Bootstrap 4.
Bootstrap 3:
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});
Examples:
for Bootstrap 3
for Bootstrap 4
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/DP4oX.png', '推荐 该账号已被封号 的文章《Modifying Twitter Bootstrap's Tooltip Colors B》','https://www.manongdao.com/article-161444.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}