Question

我的问题如下：

我已经创建了一个带格式化程序回调函数的自定义工具提示，并将useHTML属性设置为true。 useHTML的问题在于它不尊重z索引，结果是每当我放大图表时（实际显示重置缩放按钮时），重置按钮的文本都会被工具提示的文本覆盖。

   tooltip: {
        useHTML: true,
        followPointer: true,
        formatter: function() {
            return '<b>sSsSsSsSsSsSsssssssssssssssssssssS<br/>sdsdsddddddddddddssd</b>';
        }
   }

检查这个小提琴：http://jsfiddle.net/sahar_rehani/R5Ep4/

尝试放大，然后获取最接近重置缩放按钮的工具提示:) 请帮忙!!!

Answer 1

有一种改变Highcharts工具提示zIndex的简单方法：

chart.tooltip.label.attr({zIndex: 300});

尝试jsfiddle

Answer 2

只需删除useHTML：true line，您的问题就解决了！我知道这不是完美的解决方案，但会完成这项工作。当你混合svg和html时，z-index问题很常见。如果我找到更好的解决方案，我会跟进。您不需要使用HTML：true来执行您正在执行的格式设置。

        tooltip: {
            followPointer: true,
            formatter: function() {
                return '<b>sSsSsSsSsSsSsssssssssssssssssssssS<br />sdsdsddddddddddddssd</b>';
            }
        },

jsfiddle

Highcharts：cutom tooltip（useHTML：true）z-index问题over resetZoomButton

2 个答案: