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

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