0

How would I change the color of a tooltip on JS call?

For example, taking the following:

$('a').tooltip();

And doing something like:

$('a').tooltip().css('background', 'red');

To change the tooltip's color.

Walter
  • 71
  • 1
  • 7

1 Answers1

1

http://getbootstrap.com/javascript/#tooltips

They say you can listen for when an element has one : Look under 'events'

$('a').on('show.bs.tooltip', function () {
   /* update - changing the tooltip background css */
   $(this).siblings('.tooltip > .tooltip-inner').css("background-color","red");

})

Update :

Or just setting in the CSS ( thanks to Praveen Kumar )

a + .tooltip > .tooltip-inner {background-color: red'}
Community
  • 1
  • 1
Rob Sedgwick
  • 5,216
  • 4
  • 20
  • 36
  • I forgot to mention that I'm using Bootstrap v2.3.2. – Walter Mar 01 '14 at 00:15
  • It Works the same way in v2.3.2 – Rob Sedgwick Mar 01 '14 at 00:30
  • @Walter Then why does your question have the `twitter-bootstrap-3` tag? – cvrebert Mar 01 '14 at 01:26
  • It's not working. It's changing the background color of the link (`a`) rather than the tooltip. :/ – Walter Mar 01 '14 at 01:49
  • I see what you mean now @Walter. You confused me because you were trying to do this with js ( eq, why would you want to style a hidden tootip ? ) - for that you don't need js. You need to change the tooltip style class values in bootstrap.css – Rob Sedgwick Mar 01 '14 at 01:56
  • I've tried adding the class `.tooltip-white`, however, there's a problem. If I use `$('a').tooltip();`, it shows as white fine, but when I use `$('a').tooltip({ container: 'body' });`, it doesn't show as white (and I need to use `container: 'body'`. – Walter Mar 01 '14 at 02:01
  • `.a + .tooltip > .tooltip-inner {background-color: red'} - http://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color – Rob Sedgwick Mar 01 '14 at 02:04
  • Nevermind, I got it to work. I just changed `container: 'body'` to a container that's more specific (like `container: '.box'`) and changed the css accordingly. Thanks. :) – Walter Mar 01 '14 at 02:07