Question

我遇到了高亮的工具提示，其中包含可点击的元素。问题是你无法可靠地点击它们。

增加tooltip.hideDelay可以更轻松地在工具提示中单击。这并没有完全解决问题。

我希望能够悬停并在工具提示中单击，只要我愿意。只有当鼠标指针离开工具提示时才应该将其解除。

Answer 1

我的解决方案是设置一个非常长的超时来隐藏工具提示。在处理一些悬停逻辑时，我自己要忽略它。

    Highcharts.chart('my_chart', {
        tooltip: {
            // Show the tooltip for a really long time
            hideDelay: 9999999
        },
        plotOptions: {
            series: {
                events: {
                    mouseOver: function () {
                        // Restore the tooltip after hiding
                        // that's done in mouseOut
                        if (this.chart.tooltip.label) {
                            var show = this.chart.tooltip.label.show
                                    .bind(this.chart.tooltip.label);
                            show();
                        }
                    },
                    mouseOut: function () {
                        // Get a hold of the tooltip and hide it
                        // on "mouseout"
                        var label = this.chart.tooltip.label,
                            div = $(label.div),
                            hide = label.hide
                                .bind(label);

                        div.on('mouseenter', function () {
                            div.on('mouseleave', function () {
                                hide();
                                div.off('mouseleave');
                            });
                        });
                    }
                }
            }
        } 
    });

我能想到的一个缺点是工具提示会坚持下去。除非你在任何时间点盘旋它。或者悬停另一个高图系列。您可以在任何工具提示之外的单击上向主体添加侦听器以消除任何延迟的侦听器。

Answer 2

您还可以包装Pointer原型的runPointActions函数，以防止在mouseOver上显示工具提示，同时工具提示存在并在点击时调用Tooltip.refresh函数。这样，工具提示将不会显示在图表上的其他位置，直到单击特定点。

DOCS参考：
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

API参考：
http://api.highcharts.com/highcharts/plotOptions.series.point.events.click

例：
http://jsfiddle.net/0xvmLLfd/

如何制作交互式高图工具提示

2 个答案: