15

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/

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Simon
  • 2,263
  • 2
  • 19
  • 26

6 Answers6

15

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')});
});
Miha Rekar
  • 1,237
  • 12
  • 15
  • thanks @Miha Rekar this sounds like the way to go. Would you mind expanding on this a little? When I throw this in the footer of the document I get a "Uncaught SyntaxError: Unexpected token ILLEGAL". Also tooltip-inner holds the color info so far, .tooltipPhoto would overwrite this then? Thanks :) – Simon Sep 28 '12 at 13:01
  • This would be much easier if you created jsfiddle and I would show you there. – Miha Rekar Sep 28 '12 at 20:32
  • Ok so here's a basic JSfiddle of the set up, I'm sorry I can't get it working right now, can you work with this @Miha Rekar? Thanks sir! – Simon Sep 28 '12 at 22:25
  • I've edited your [fiddle](http://jsfiddle.net/mr_foto/rZxrm/1/) and also updated the answer. – Miha Rekar Sep 29 '12 at 08:44
  • To complete your function I will add transparency: $('.tooltip.in').css('opacity', '0.8'); $('.tooltip.in').css('filter', 'alpha(opacity=80)'); Thanks. – Adrian P. Apr 04 '13 at 15:55
  • @AdrianP. why would you do that here? You should use CSS for that since it doesn't change no matter the color. – Miha Rekar Apr 08 '13 at 17:18
  • @MihaRekar for me it's working but I'm using Bootstrap Tooltip not jQuery UI – Adrian P. May 01 '13 at 00:57
15

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

enter image description here

enter image description here

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;
}
Community
  • 1
  • 1
Shital Shah
  • 63,284
  • 17
  • 238
  • 185
  • It's worth noting that the selectors as shown will not work if you've used the tooltip's `container` option (as you need to do when applying tooltips to elements that are nested in an `input-group`). I got it to work by removing the adjacent-sibling selector; do you have a better fix (since that causes all tooltips to gain the same style)? – Tieson T. Jul 31 '14 at 05:18
  • container scenario is tricky because your container can be anywhere and you can't use CSS selector to find and apply the style. One way may be to create specific style for container such as tooltip-container-info and so on. This however will cause whole container to have same style. Another option is to use data-template attribute that allows to specify what HTML bootstrap will generate. In this html, you can specify styles directly. Third approach is just to use JavaScript to apply style on given container for tooltips. – Shital Shah Aug 07 '14 at 00:11
  • Yeah, I found that the data- attribute was the most consistent. I may add an answer showing how I combined your answer with an answer from a related question. Your solution definitely rocks, though. – Tieson T. Aug 07 '14 at 00:14
14

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;
}
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Liz Goncalves
  • 141
  • 1
  • 2
2

See Dynamically add a class to Bootstrap's 'popover' container

Her fix allows a data-class selector by modifying bootstrap.js with one line

Community
  • 1
  • 1
Peter Ehrlich
  • 6,969
  • 4
  • 49
  • 65
1

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
Emanuel
  • 610
  • 6
  • 15
0

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

Sergey Nudnov
  • 1,327
  • 11
  • 20