javascript - 如何向 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 小提琴

$(".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();
            });
        }
    });
})