I'm looking for a jQuery tooltip plugin that doesn't use the <title>
attribute. I've tried a few variations so far including; Tooltipster, PowerTip, jTip and TipTip! They all work but don't all work properly in IE8 (this is a must). They also all use the <title>
attribute.
I need to be able to use other <html>
tags such as <p>
etc within the containing block hence the need to not use <title>
. A plugin that uses <div>
or similar would be perfect as I can then customise to how I want and use the relevant <html>
tags.
I've searched and searched and searched but can't find anything, so if anybody knows of one I would greatly appreciate it!
You can use the jQuery Tooltip
without title using custom-content
like:
$(function () {
var content = 'We ask for your age only for statistical purposes.';
$(document).tooltip({
items: "input",
content: function () {
var element = $(this);
if (element.is("input")) {
return "<p class='arrow'>" + content + "</p>";
}
}
});
});
FIDDLE DEMO
The issue is that though you can specify {content:''}
for your tooltip it requires a title tag or that you specify a alternate for it to use, even if it will not use the attributes value.
However the value that you pass in for {items:'selector'}
is a selector. By default it is {items:'[title]'}. Instead of setting the selector to an attribute it can set it to the name of the tag it is being applied to. In your case, and frankly in most cases anyone would be manually setting a tooltip, you can use {items:'*'}
which is a wild card selector and will work for any element.
Markup:
<p class="example">
Joke Part One.
</p>
Script:
$('.example').tooltip({
content: 'This will be your working tooltip',
items:'*'
});
Example: http://jsbin.com/depax/5/edit?html,js,output
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With