Benteh Benteh - 3 months ago 35
jQuery Question

jQuery Sparklines and Twitter Bootstrap 3 - tooltip style overrides?

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

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;
}
Comments