jQuery Sparklines and Twitter Bootstrap 3 - tooltip style overrides?

benteh picture benteh · Sep 19, 2013 · Viewed 14.1k times · Source

Here it goes: I am trying to use jQuery Sparklines with Twitter Bootstrap 3. In the process, the tooltip of Sparklines loose styling, and it is clearly that the Bootstrap css is overriding something in the Sparklines JS.

As far as I can make out, it has to do with the tooltip selector.

Here is one example of how it should look. This is without the Bootstrap css. Point at the different sparklines, and see a pretty tooltip with values hovering: JSfiddle, how it should look

Here, unfortunately, is what happens when I add the Bootstrap css: JSfiddle, how it looks with Bootstrap css.

I am sure it is pretty simple, but as the default css for Sparklines is hard-coded into the js, I am out at sea.

Any pointers would be greatly appreciated.

Answer

miboper picture miboper · Jan 10, 2014

I found that the following works better to counter bootstrap css

.jqstooltip {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}