jQuery Tooltip that doesn't use the <title> attribute
Question
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!
7 answers
solution1
4 ACCPTED 2013-06-11 08:05:25
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>";
}
}
});
});
solution2
4 2014-02-12 16:51:52
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:'*'
});
solution3
1 2013-06-11 07:55:06
You can use twitter bootstrap for the tooltips. There are many expandable plugins are available online.
solution4
0 2013-06-11 07:54:18
You can try twitter bootstrap popover, and you can customize the css.
have a look into it.
solution5
0 2013-08-26 11:29:37
You can pull the content from a standard or custom (data-) attribute in the target element like this:
$(document).tooltip({ items: "a[data-title]" },
{content: function(){
return $(this).attr("data-title");
}
});
Here the 'content' option is defined as a function that returns the value of the data-title attribute. There are many more cases for using a function to return the content of the tooltip, eg it could return the result of an AJAX call or other dynamic content.
If you wanted to include formatted HTML in your tooltip, the content:function could retrieve the inner HTML of a hidden div on the page.
solution6
0 2015-03-30 18:57:47
This is a bit hacky but when items doesn't work for you (let's say you are doing for multiple selectors at once) you can also set title on the fly:
$(el).attr('title', '')
.tooltip({
content: //...
position: //...
});
solution7
-1 2013-06-11 07:56:17
Title is an attribute of HTML tags. You can customize the library according to your need.
You can define a different attribute instead of title and then use as tooltip.
eg
<div tooltip_text="hello world!"> ... </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.