Question

我目前有此设置：tooltip: { isHtml: true, trigger: 'both' }。当我只是鼠标悬停在一个点上时，我有一些其他代码重新定位出现的工具提示。但问题是，当我单击工具提示然后将鼠标悬停在另一个点上时，会出现与第一个重叠的辅助工具提示。我想要的是用户必须先点击第一个工具提示才能看到任何其他工具提示。

此外，用户是否可以不必点击要删除的选择点？因此，用户可以单击屏幕上的某个位置或其他点，然后工具提示将消失或正确显示新的工具提示。

转移工具提示的代码

//Start of shifting code
            google.visualization.events.addOneTimeListener(chart, 'ready', function () {
                var container = document.querySelector('#chart_div > div:last-child');
                function setPosition(e) {
                    if (e && e.target) {
                        var tooltip = $(e.target);
                        setTimeout(function () {
                            tooltip.css('left', 635 + 'px');
                            tooltip.css('top', 100 + 'px');
                        }, 1);
                    }
                    else {
                        var tooltip = container.querySelector('.google-visualization-tooltip');
                        tooltip.style.left = 635 + 'px';
                        tooltip.style.top = 100 + 'px';
                    }
                }

                if (typeof MutationObserver === 'function') {
                    var observer = new MutationObserver(function (m) {
                        for (var i = 0; i < m.length; i++) {
                            if (m[i].addedNodes.length) {
                                setPosition();
                                break; // once we find the added node, we shouldn't need to look any further
                            }
                        }
                    });
                    observer.observe(container, {
                        childList: true
                    });
                }
                else if (document.addEventListener) {
                    container.addEventListener('DOMNodeInserted', setPosition);
                }
                else {
                    container.attachEvent('onDOMNodeInserted', setPosition);
                }
            });
            //End of shifting code

正在发生的事情的图像 enter image description here

Answer 1

当存在由选择产生的工具提示时，API无法在鼠标悬停时抑制产生工具提示。但是，您可以完全关闭工具提示，并使用必要的逻辑来实现您自己的自定义工具提示，以控制何时生成工具提示（由于您可以完全控制工具提示的构造，因此也可以删除MutationObserver，用于监视新工具提示以调整定位）。您可以使用＆＃34;选择＆＃34;和＆＃34; onmouseover＆＃34; /＆＃34; onmouseout＆＃34;生成和删除工具提示的事件。

如果您实现自定义工具提示，则可以使用要删除它们的任何逻辑。如果您选择不实施自定义工具提示，则可以通过setSelection方法清除图表的选择来删除在选择时产生的工具提示：

chart.setSelection(); // set the selection to null, which clears all selected points and tooltips

您可以从您喜欢的任何事件处理程序中调用它（只要chart对象在事件处理程序的范围内）。

工具提示重叠 - 谷歌图表

1 个答案: