javascript - 当标题为空时停止触发 PopOver

Question

我正在开发一个网站。您可以在此处预览有问题的页面:https://sporedev.ro/pleiade/lobby.html (不要介意声音，它们不会自动播放，并且将来会有播放/静音的选项)。

我正在使用mapify.js对于这个项目。

我想为门附近指示房间名称的牌匾启用 PopOver。

我设法激活了 PopOver，但问题是我无法控制我希望它们出现的对象。

当有人将鼠标悬停在这些牌匾以外的其他对象上时，我不希望出现 PopOver。

由于 PopOver 中的文本放置在该区域的 title 内，我认为检查 title 是否为空就不会触发 PopOver。

这是代码:

    $("img[usemap]").mapify({
    popOver: {
        content: function(zone){ 
                return "<strong>"+zone.attr("data-title")+"</strong>";
        },
        delay: 0.7,
        margin: "15px",
        height: "60px",
        width: "150px"
    }
});

这是 HTML:

<area data-group-id="group-2"  alt="f01_r01" title="Secretariat"  shape="poly" coords="375,391,375,450,381,452,444,452,446,446,446,399,443,394,382,390" nohref  alt="" title="Secretariat" data-hover-class="custom-hover-1"/>

我查看了SO，并尝试添加一些条件，但结果并不好。

如果您需要任何其他信息，请告诉我。

Answer 1

我认为最好的选择是对不需要弹出窗口的区域使用自定义弹出窗口类，并采用 display: none !important 样式。

<area data-pop-over-class="hidden" href="#" shape="poly" coords="..." />

.hidden {
    display: none !important;
}

编辑

如果您愿意修改原始源代码，在第 445 行，您可以更改以下 block : https://github.com/etienne-martin/Mapify/blob/master/src/mapify.js#L445

Mapify.prototype._renderPopOver = function (zone) {
    // Ignore zones with `data-popover-disabled`
    if ($(zone)[0].hasAttribute('data-popover-disabled') return;

    if (!this.isCustomPopOver) {
        this._renderDefaultPopOver(zone);
    } else {
        this._renderCustomPopOver(zone);
    }
};

然后将 data-popover-disabled 添加到您不希望显示弹出框的区域。

编辑2

对于您指定的缩小版本。

查找:

prototype._renderPopOver=function(a){this.isCustomPopOver?this._renderCustomPopOver(a):this._renderDefaultPopOver(a)}

替换:

prototype._renderPopOver=function(a){if(a.hasAttribute('data-popover-disabled'))return;this.isCustomPopOver?this._renderCustomPopOver(a):this._renderDefaultPopOver(a)}