How to change the tooltip background color in JQuery Sparklines

Question

Is there a way to change the default background color of the tooltip in jQuery Sparklines? I have not been able to find a simple solution to this and there hasn't seem to be a similar question for sparklines tooltips. I would like to change the background color from the transparent default color to a solid grey.

I am using a custom tooltipFormatter to create the text within the tooltip, e.g.

$('#sparkline').sparkline(data, {
  type: 'bar',
  tooltipFormatter: function(sparkline, options, fields) {
     //<span>Stuff</span>
  }
});

Thanks!

Trimetrogon

Answer 1

There are actually 2 classes that are relevant: jqstooltip, as mentioned as well as jqsfield which is most likely what you need if you want to change the text attributes.

An example:

.jqstooltip { 
 background-color: #c6e5f6 !important;
 font-size: 11px !important; 
 padding: 5px !important; 
 color: black !important; 
 overflow: auto !important; 
 text-align: center !important;  
 border-color: #CCCCCC !important; 
 max-width: 400px !important; 
 max-height: 400px !important; 
}

.jqsfield { 
 font-size: 10px !important; 
 color: black !important; /*set the text color here */
}

Billfold

Answer 2

You can use the tooltipClassname option to add a CSS class to default tooltips and override their styling.

Check http://omnipotent.net/jquery.sparkline/#interactive for more tooltip options.

Kutch

Answer 3

The default class for tooltips is .jqstooltip you can override in your own CSS using !important

Ilbert

I'd tried overriding .jqstooltip {color: #80050c !important;background-color: #eff7ff !important;}. The background changed but the text color didn't change. I couldn't figure out how to use tooltipClassname as sugarenia suggested. Thanks for your help. – Rhinology