Question

我有一个jqplot条形图，我已经实现了tooltipContentHandler来显示图像而不是文本。这是代码......

tooltipContentEditor: function(str, seriesIndex, pointIndex, jqPlot) {
    var currentItem = myData[0][pointIndex];
    var pid = currentItem[0];
    // Get the image url from static list...
    var pidImage = pidImages[pid];

    var s = "<img src='" +pidImage+ "' width=50px height=50px/>";
    return s;
 }

工作正常 - 鼠标移动到条形图上时会显示图像。我的问题是图像的不透明度 - 因为图像的一部分覆盖了条形图而另一部分没有覆盖，图像不透明度看起来很奇怪。

所以我只是通过将其添加到tooltipContentHandler函数来改变不透明度......

$('.jqplot-highlighter-tooltip').css("background", "rgba(208,208,208,1.0)");

没有区别，所以我直接在jqplot css中进行了更改（包括“.min”版本）：

.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
    /*replace this
      background: rgba(208,208,208,0.5);
     with...*/
    background: rgba(208,208,208,1.0);
}

但仍然是相同的不透明度问题。然后我尝试在css中对.jqplot-cursor-tooltip进行相同的rgba更改，虽然我知道这没什么区别。

任何人对如何解决这个问题有任何好的想法？

感谢。

Answer 1

我首先认为这也是一个不透明度问题，但它也是一个z-index问题。所以在我的情况下，我用CSS解决了它：

.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
    z-index: 2;
    background: rgba(208,208,208,1)!IMPORTANT;
}

点标签有z-index：2，但是工具提示最终将使用相同的z-index，因为之后使用JavaScript添加了工具提示

Answer 2

使用CSS属性：

opacity:0.4;

在图像上改变不透明度。 CSS Image Opacity help

Answer 3

尝试编辑

.jqplot-cursor-tooltip

类而不是荧光笔或覆盖它（在规则末尾使用“！important”）

您可以在此处找到css规则列表：http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html

Answer 4

我使用：

修复了jqPlot工具提示的不透明度

$('.jqplot-highlighter-tooltip').css({'background': '#fafafa', 'padding': '2px 5px'});

Answer 5

我用'Anton Danilchenko'告诉，但是在PieChartModel类的Extender方法中，它对我有效。

pieModel.setExtender（“function（）{$（'。jqplot-highlighter-tooltip'）。css（{'background'：'＃fabafa'，'padding'：'2px 5px'}）;}”） ;

可以改变jqplot工具提示的不透明度吗？

5 个答案: