仅当未显示弹出窗口时才在悬停时显示传单工具提示

Question

I have a tooltip with a short text only description and a popup with a longer formatted description bound to a marker on a leaflet map.

The tooltip shows on hover and the popup shows when you click on the place marker. When the larger popup is visible there is no need to show the tooltip. Can I disable the tooltip when the popup is visible and how do I do this?

Here is the code I have so far:

var marker = L.marker(location);
marker.bindPopup("Long description with extra formatting ...");
marker.bindTooltip("Short description");

Answer 1

You can add custom handlers for the tooltip and popup. With the leaflet method isPopupOpen() which return true or false you can descide if you open the tooltip or not.

function customTip() {
    this.unbindTooltip();
    if(!this.isPopupOpen()) this.bindTooltip('Short description').openTooltip();
}

function customPop() {
    this.unbindTooltip();
}

var marker = L.marker(location);
marker.bindPopup('Long description with extra formatting ...');
marker.on('mouseover', customTip);
marker.on('click', customPop);

Answer 2

I use another solution in my project. I set the tooltip opacity acording to this.isPopupOpen() . For me this works good, because I don't want to always set the tooltip content again. To hide the tooltip instantly on the click event, set the opacity to 0 on click.

function showHideTooltip()
{
        var mytooltip = this.getTooltip();
        if(this.isPopupOpen())
        {      
            // Popup is open, set opacity to 0 (invisible)
            mytooltip.setOpacity(0.0);
        }
        else
        {
            // Popup is cosed, set opacity back to visible
            mytooltip.setOpacity(0.9);
        }
}

function clickHideTooltip()
{
        var mytooltip = this.getTooltip();
        mytooltip.setOpacity(0.0);
}

var marker = L.marker(location);
marker.bindPopup("Long description with extra formatting ...");
marker.bindTooltip("Short description");
marker.on('mouseover', showHideTooltip);
marker.on('click', clickHideTooltip);

Answer 3

I used the popupopen and popupclose events to manipulate the tooltip visibility. This is a good generic solution that doesn't involve extending the standard classes and still respects all the standard configuration and options around popups and tooltips.

map.on('popupclose', function (e) {

    // make the tooltip for this feature visible again
    // but check first, not all features will have tooltips!
    var tooltip = e.popup._source.getTooltip();
    if (tooltip) tooltip.setOpacity(0.9);

});

map.on('popupopen', function (e) {

    var tooltip = e.popup._source.getTooltip();
    // not all features will have tooltips!
    if (tooltip) 
    {
        // close the open tooltip, if you have configured animations on the tooltip this looks snazzy
        e.target.closeTooltip();
        // use opacity to make the tooltip for this feature invisible while the popup is active.
        e.popup._source.getTooltip().setOpacity(0);
    }

});

NOTE: Took a bit of effort to track down the actual events this solution to a different issue pointed me in the right direction: https://stackoverflow.com/a/16707921/1690217

In my case I have bound the tooltip and the popup to have the same content, so I want to hide the tooltip to suppress the redundant information. In the following greenshot you can see the popup for one shape and the tooltip on hover over the other shapes, it looks messy when that tooltip tries to show under the existing popup when you hover over the feature that triggered the popup.

Answer 4

You can use my solution to this problem:

marker.on('click', function () {
    this.getTooltip().setOpacity(this.isPopupOpen() ? 0 : .9);
});

marker.getPopup().on('remove', function () {
    this._source.getTooltip().setOpacity(0.9);
});