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

Question

我有一个带有短文本描述的工具提示和一个绑定在leaflet地图标记上的较长格式化描述的弹出窗口。

当鼠标指向该位置标记时，会显示工具提示；当您单击该位置标记时，会显示弹出窗口。当弹出窗口可见时，无需显示工具提示。 我可以在弹出窗口可见时禁用工具提示吗？如何做到这一点？

这是我目前拥有的代码：

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

- Richard Garside

Answer 1

你可以添加自定义处理程序来控制工具提示和弹出窗口。使用Leaflet方法 isPopupOpen()，它返回true或false，您可以决定是否打开工具提示。

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

- d-h-e

---

谢谢。一开始我没看出你为什么需要customPop，但现在我明白了，这可以在第一次点击标记时隐藏工具提示并显示弹出窗口。 - Richard Garside

Answer 2

我使用了 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://dev59.com/_Gox5IYBdhLWcg3wq2EC#16707921

在我的情况下，我将工具提示和弹出窗口绑定为相同内容，因此我想隐藏工具提示以抑制冗余信息。在下面的 Greenshot 中，您可以看到一个形状的弹出窗口和悬停在其他形状上时的工具提示，当您悬停在触发弹出窗口的功能上时，工具提示尝试显示在现有弹出窗口下方时会显得混乱。

- Chris Schaller

Answer 3

在我的项目中，我使用了另一种解决方案。我根据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);

- xFL

---

不错的解决方案，但没有必要使用“clickHideTooltip”函数。您只需要使用第一个函数，可以这样简化它：this.getTooltip().setOpacity(this.isPopupOpen() ? 0 : .9); - user3292788

@user3292788：他的解决方案对我有效，而你的则没有。 - Cypher

Answer 4

这段代码用于在打开弹出窗口时隐藏工具提示：

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

- sylvain

Answer 5

你可以使用我的解决方案来解决这个问题：

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

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

- Fedor Sarafanov

---

请查看以下链接，了解如何在 Stack Overflow 上撰写优质答案： https://stackoverflow.com/help/how-to-answer - DaniyalAhmadSE