Attempting to modify the tooltip color of Bootstrap tooltips

Question

I'll keep this short and sweet. I'm unaware of a method to freeze JavaScript/HTML on the fly to debug the tooltip that display within the Bootstrap UI, but I was able to track down and modify the majority of the default "black" base color. However, I'm unable to track down where the code lives to change the top "arrow" on the tooltips I've built out here: http://jsfiddle.net/jodriscoll/xPCST/.

/* override the tooltip color theme */
.tooltip-inner,
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow,
.tooltip.right .tooltip-arrow,
.tooltip.left .tooltip-arrow
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    background-color: rgb(220,40,30);
    border-color: rgb(220,40,30);
}

If anyone can either let me know where this code lives, or how to pause JavaScript on a page so I can target the container being created towards the bottom of the page, I'd greatly appreciate it :)

If you use Firefox, install firebug- there is an easy DOM inspection tool which allows you to click on any element and inspect it (inclusive of CSS) — SW4, Nov 13 '13 at 13:46
Your fiddle doesn’t work: `ReferenceError: options is not defined` — CBroe, Nov 13 '13 at 13:47
Your fiddle doesn't work. It isn't showing any tooltips... :( — Praveen Kumar Purushothaman, Nov 13 '13 at 13:47
Maybe the best solution is go to: http://getbootstrap.com/customize/ and set the colors that you want there. — Aguardientico, Nov 13 '13 at 13:47
Here's a Working version of the Fiddle: http://jsfiddle.net/xPCST/8/ — MackieeE, Nov 13 '13 at 13:50
See my answer - Just create a new css file after you import bootstrap.css and add my code. — heymega, Nov 13 '13 at 14:01
Sorry about that guys, use this link going forward. http://jsfiddle.net/jodriscoll/xPCST/ — Joey O, Nov 13 '13 at 15:38
look at this answer: http://stackoverflow.com/a/38279489/3554107. For styling each directional arrows, we have to select each arrow using CSS attribute selector and then style them individually. — vishnu, Jul 09 '16 at 07:43
Possible duplicate of [Styling the arrow on bootstrap tooltips](http://stackoverflow.com/questions/15383440/styling-the-arrow-on-bootstrap-tooltips) — vishnu, Jul 09 '16 at 07:43

heymega · Accepted Answer · 2013-11-13T15:48:16.753

1

You need to change the following in bootstrap css

.tooltip-arrow {
    border-bottom-color: #000;
}

alternatively you can overwrite this in your own custom css

See jsfiddle - http://jsfiddle.net/xPCST/12/

edited Nov 13 '13 at 15:48

answered Nov 13 '13 at 14:00

heymega

9,215
8
42
61

Tried to target that link of CSS and it unfortunately didn't do anything. http://jsfiddle.net/jodriscoll/xPCST/ – Joey O Nov 13 '13 at 15:41
have you added it in a seperate css file AFTER the bootstrap.css is reference? – heymega Nov 13 '13 at 15:42
It's running through the jsFiddle engine, anything within the engine's CSS window is rendered within a style tag and overrides any CSS files referenced. I don't believe that CSS selector targets the small "black" arrow on top of the tooltip rectangle. – Joey O Nov 13 '13 at 15:43
Ok ive updated the jsfiddle proving that this can be done in css - http://jsfiddle.net/xPCST/12/ – heymega Nov 13 '13 at 15:45
Ahh! I see what you meant now. It's being overridden in regards to priority. I'll dig deeper to avoid the !important since it's frowned upon, but it resolves my issue for the time being. Thanks! +1 check mark! http://jsfiddle.net/jodriscoll/xPCST/ – Joey O Nov 13 '13 at 15:57
@JoeyO'Driscoll Glad it's sorted :) – heymega Nov 13 '13 at 15:58

Attempting to modify the tooltip color of Bootstrap tooltips

1 Answers1