Tooltips overlapping - google charts

Question

I currently have this setting: tooltip: { isHtml: true, trigger: 'both' } . When I just mouse over a point, I have some other code that repositions the tooltip that appears. The problem is however that when I click on the tooltip and then mouse over another point, a secondary tooltip appears that overlaps the first. What I want is for the user to have to click off the first tooltip before being able to see any others.

Also, is it possible for the user to not have to click on the point for the selection to be removed? So the user could click somewhere on the screen or on another point and the tooltips would then either disappear or correctly display the new tooltip.

Code that shifts the tooltip

//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

An image of what is happening

Answer 1

There is no way in the API to suppress spawning tooltips on mouseover when a tooltip spawned by a selection is present. You can turn off tooltips entirely, however, and implement your own custom tooltips with the requisite logic to control when you spawn one (which, since you would have complete control of the tooltip's construction, would also allow you to remove the MutationObserver that watches for new tooltips to adjust positioning). You can use the "select" and "onmouseover"/"onmouseout" events to spawn and remove tooltips.

If you implement custom tooltips, you can use any logic you want to remove them. If you choose not to implement custom tooltips, you can remove tooltips spawned on select by clearing the chart's selection via the setSelection method:

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

You can call that from whatever event handler you like (as long as the chart object is within scope of the event handler).