僅當未顯示彈出窗口時才在懸停時顯示傳單工具提示

Question

我有一個帶有簡短文本描述的工具提示和一個帶有較長格式描述的彈出窗口，該描述綁定到傳單地圖上的標記。

懸停時會顯示工具提示，單擊位置標記時會顯示彈出窗口。 當較大的彈出窗口可見時，無需顯示工具提示。 當彈出窗口可見時，我可以禁用工具提示嗎？我該怎么做？

這是我到目前為止的代碼：

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

Answer 1

您可以為工具提示和彈出窗口添加自定義處理程序。 使用返回 true 或 false 的傳單方法isPopupOpen()您可以決定是否打開工具提示。

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

我在我的項目中使用了另一種解決方案。 我根據this.isPopupOpen()設置了工具提示不透明度。 對我來說這很好用，因為我不想總是再次設置工具提示內容。 要在單擊事件上立即隱藏工具提示，請在單擊時將不透明度設置為 0。

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

我使用popupopen和popupclose事件來操縱工具提示的可見性。 這是一個很好的通用解決方案，它不涉及擴展標准類，並且仍然尊重彈出窗口和工具提示周圍的所有標准配置和選項。

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

});

注意：花了一些努力來追蹤實際事件，這個解決方案為不同的問題指明了正確的方向： https : //stackoverflow.com/a/16707921/1690217

就我而言，我已將工具提示和彈出窗口綁定為具有相同的內容，因此我想隱藏工具提示以抑制冗余信息。 在下面的綠圖中，您可以看到一個形狀的彈出窗口和懸停在其他形狀上的工具提示，當您將鼠標懸停在觸發彈出窗口的功能上時，該工具提示試圖顯示在現有彈出窗口下時，它看起來很混亂。

Answer 4

您可以使用我的解決方案來解決此問題：

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

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