I am searching for a Tooltip plugin/library for JQuery. It should be able to automaticlly position tooltips, like TipTip, and also support HTML content for the tips.
TipTip does fullfill both conditions, but:
Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).
I believe this one does. For instance, this demo shows an image. You could easily have a bodyHandler
that retrieves the HTML from an attribute on the element. For instance
<a href="whatever" data-tooltip="This is a <strong>marked up</strong> tooltip">foo</a>
That's perfectly valid HTML, and the bodyHandler
would look something like
return this.attr("data-tooltip"));
I didn't want to leave jquery native plugin and mess with additional libs, so I figured out quite simple solution:
$('.tooltips').tooltip({
content: function(){
return $(this).attr('title');
}
})
This way - your title attribute with HTML may be used successfully.
I like TipTip a lot. The "title" field usage is awkward, but you don't have to do that:
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
(via http://code.drewwilson.com/entry/tiptip-jquery-plugin)
This tooltip widget included in the jQuery UI library supports different automatic positions and HTML in the title attribute: http://api.jqueryui.com/tooltip/