如何更改 JQuery Sparklines 中的工具提示背景颜色答案

【问题标题】：How to change the tooltip background color in JQuery Sparklines如何更改 JQuery Sparklines 中的工具提示背景颜色
【发布时间】：2013-07-10 19:44:50
【问题描述】：

有没有办法改变 jQuery Sparklines 中工具提示的默认背景颜色？我无法找到一个简单的解决方案，并且迷你图工具提示似乎没有类似的问题。我想将背景颜色从透明的默认颜色更改为纯灰色。

我正在使用自定义 tooltipFormatter 在工具提示中创建文本，例如

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

谢谢！

【问题讨论】：

标签： jquery tooltip sparklines

【解决方案1】：

实际上有 2 个相关的类：如前所述的 jqstooltip 以及 jqsfield，如果您想更改文本属性，这很可能是您需要的。

一个例子：

.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 */
}

【讨论】：

【解决方案2】：

您可以使用 tooltipClassname 选项将 CSS 类添加到默认工具提示并覆盖其样式。

查看http://omnipotent.net/jquery.sparkline/#interactive 了解更多工具提示选项。

【讨论】：

【解决方案3】：

工具提示的默认类是 .jqstooltip，您可以使用 !important 在自己的 CSS 中覆盖

【讨论】：

我试过覆盖.jqstooltip {color: #80050c !important;background-color: #eff7ff !important;}。背景改变了，但文字颜色没有改变。我不知道如何使用 tooltipClassname ，就像 sugarenia 建议的那样。感谢您的帮助。