javascript - Modifying Twitter Bootstrap's Tooltip Colors Based on Position

Question

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/

Answer 1

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')});
});