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