Show leaflet tooltip on hover only when popup is not being shown

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");

score 9 · Accepted Answer · answered Mar 20 '19 at 19:16

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);

Thanks. I didn't see at first why you needed customPop, but I see now that this hides the tooltip when you first click on the marker and the popup is shown. — Richard Garside, Mar 21 '19 at 08:20

Chris Schaller · Answer 2 · 2021-10-20T15:31:52.063

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.

xFL · Answer 3 · 2020-09-10T19:14:55.667

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);

Nice solution but there's no need to use the "clickHideTooltip" function. You only have to use the first and you can simplify it that way `this.getTooltip().setOpacity(this.isPopupOpen() ? 0 : .9);` — user3292788, Jun 05 '21 at 08:26

score 0 · Answer 4 · edited Aug 08 '21 at 17:12

0

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);
});

edited Aug 08 '21 at 17:12

Aaron Sarnat

1,207
8
16

answered Aug 08 '21 at 10:17

Fedor Sarafanov

1

Please check this link to find how to write a good answer on Stack Overflow: https://stackoverflow.com/help/how-to-answer – DaniyalAhmadSE Aug 08 '21 at 20:00

sylvain · Answer 5 · 2023-03-21T12:48:46.847

This works for hidding a tooltip when opening a popup :

onEachFeature: function (feature, layer) {
    var popupText = "blablabla";
    var tooltipText = "blabla";
    layer.bindPopup(popupText);
    layer.bindTooltip(tooltipText, {closeButton: false, offset: L.point(0, -10)});

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

Show leaflet tooltip on hover only when popup is not being shown

5 Answers5