jQuery Sparklines and Twitter Bootstrap 3 - tooltip style overrides?

Question

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.

Syncom

Answer 1

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

Antenatal

although the resulting tooltip box is a little bolder than before, this is a really elegant solution! Thanks – Throughcomposed

Answer 2

I found that this works best to get it to resize based on content.

.jqstooltip {
  width: auto !important;
  height: auto !important;
}

Aargau

Had the same issue with semantic-ui and this fixed it. Thanks for sharing! :) – Ashford

Answer 3

Well! I seem to have solved it. Not perfect, but good enough for now: for further reference for others: In the Sparkline js: added to line 354:

'padding: 5px 5px 15px 5px;' +
'min-height: 30px;' +
'min-width: 30px;' +

.and changed line 871 from:

this.width = this.sizetip.width() + 1;

to:

this.width = this.sizetip.width() + 12;

Not perfect, but it works.

Syncom

Answer 4

I had same issue, you can use this css

  .jqstooltip{ 
       width:50px;
       height:25px!important;
    }

Doldrums

Answer 5

.jqstooltip {
  width: auto !important;
  height: auto !important;
}

Clavier