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

Question

Hello I have a few elements with class .tooltip. Each of them should be hidden after it's tooltip is clicked, but i don't know how to target specific element, which trigerred tooltip.

Element should be hidden after it's tooltip is clicked.

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

score 1 · Accepted Answer · answered Nov 15 '15 at 14:19

You have to initialize your tooltip on each element one at the time. use .each()-method for that. Here is a 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();
            });
        }
    });
})

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

1 Answers1