如何向 tooltipster 插件添加点击事件，以隐藏选定的元素答案

【问题标题】：How to add click event to tooltipster plugin, to hide selected elements如何向 tooltipster 插件添加点击事件，以隐藏选定的元素
【发布时间】：2015-11-15 13:59:31
【问题描述】：

您好，我有一些元素属于 .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;
}

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

【问题讨论】：

标签： javascript jquery html tooltip tooltipster

【解决方案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();
            });
        }
    });
})

【讨论】：