如何将点击事件添加到 tooltipster 插件，以隐藏所选元素

Question

你好，我有一些元素 class .tooltip。单击工具提示后，它们中的每一个都应该隐藏，但我不知道如何定位特定元素，触发了工具提示。

点击工具提示后元素应该被隐藏。

jsfiddle 演示： https://jsfiddle.net/5r88wyfr/1/

html

<p><a href="http://iamceege.github.io/tooltipster/">tooltipster website</a></p>

<p class="tooltip">paragraph</p>
<b class="tooltip">bold</b>
<div class="tooltip">div</div>
<a class="tooltip" href="#">anchor</a><br>
<span class="tooltip">span</span>

css

.tooltip {
    margin: 30px;
    display: inline-block;
    border: solid 1px black;
    padding: 5px 10px;
}
.tooltipster-default {
    cursor: pointer;
}
.tooltipster-default:hover {
    text-decoration: underline;
}

js

$("*").tooltipster({
    content: $('<span>hide this element</span>'),
    interactive: true,
    onlyOne: true,
 });

Answer 1

您必须一次对每个元素初始化工具提示。为此使用 .each() 方法。这是一个JS-fiddle

$(".tooltip").each(function(){
    $(this).tooltipster({
        content: $('<span>hide this element</span>'),
        interactive: true,
        onlyOne: true,
        functionReady: function(origin, tooltip) {
            tooltip.on("click", function() {
                origin.hide();
            });
        }
    });
})

如何将点击事件添加到 tooltipster 插件，以隐藏所选元素

How to add click event to tooltipster plugin, to hide selected elements

html

javascript

jquery

tooltip

tooltipster