如何将click事件添加到tooltipster插件,以隐藏所选元素

时间:2015-11-15 13:59:31

标签: javascript jquery html tooltip tooltipster

您好我有一些类.tooltip的元素。在单击工具提示后,每个都应该被隐藏,但我不知道如何定位特定元素,这是一个trigerred工具提示。

单击工具提示后,应隐藏元素。

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

1 个答案:

答案 0 :(得分:0)

您必须在每个元素上初始化工具提示。使用.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();
            });
        }
    });
})