CODEWITHSUNDEEP
jquerycsstwitter-bootstrapcanvassparklines
benteh
benteh

Reputation: 2288

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.

Upvotes: 33

Views: 14645

Answers (5)

user6757284
user6757284

Reputation: 

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

Upvotes: 2

lonerockz
lonerockz

Reputation: 253

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

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

Upvotes: 10

miboper
miboper

Reputation: 1156

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

Upvotes: 101

Nicola Mihaita
Nicola Mihaita

Reputation: 71

I had same issue, you can use this css

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

Upvotes: 5

benteh
benteh

Reputation: 2288

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.

Upvotes: 5

Related Questions