Question

6

Modifying Twitter Bootstrap's Tooltip Colors Based on Position

rated 0 times [ 9] [ 3] / answers: 1 / hits: 34101 / 12 Years ago, fri, september 28, 2012, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

josuea questions

1 POST http://localhost:3000/undefined/post 404 (Not Found)

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React Warning: Each child in a list should have a unique key prop. in render() function

Mon, May 18, 20, 00:00, 4 Years ago

1 Why is asdf.replace(/.*/g, x) == xx?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 how can i get value of moment format date picker in format (YYYY-MM-DD)

Tue, Dec 10, 19, 00:00, 5 Years ago

1 SyntaxError: Unexpected token in Gulpfile.js

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 12 Years ago skyler · Accepted Answer

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

});