I've been trying a number of different plugins: - Tooltipster - Qtip2 - Protip
and more tooltip plugins for Javascript.
There is one thing which I don't quite understand, and it would be great if an expert in JS and CSS can point it out.
For every plugin I tried out there, they all generate markup for the actual tooltip box, instead of using the markup that I specified for the tooltip.
What I mean is, let's say I have something like this:
<a href="#" class="tooltip-trigger">Hover Me</a>
<div class="tooltip-box">
Lorem ipsum dolor sit amet
</div>
When I initialize the plugin, and hover on "Hover Me", it will create a cloned copy of ".tooltip-box" and place it in the bottom of my HTML page.
My question is, why not directly use the one I defined? Is there technically something that cannot be achieved?
I've been search around for a while. I believe there is a valid reason, but I just couldn't find it anywhere.
Any help would be appreciated.
I can only answer for Tooltipster, which I maintain. In version 4, Tooltipster does use the div you provide, not a clone of it. It will only use a clone if you set the contentCloning option to true. The reasoning behind cloning is when you create several tooltips which should all use a single element as content, for example like this:
$('#origin1, #origin2').tooltipster({
content: $('.tooltip-box')
})
Your div obviously couldn't be displayed in both tooltips at the same time, so you'd have to use a clone.
Cloning by default is probably ok for most people and saves them the trouble, but I find it counter-intuitive when you think about it (so do you, obviously). It's the kind of magic that makes things simpler at first glance, but complicates things in the end. So it's now disabled by default in Tooltipster.