Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Tooltip that doesn't use the <title> attribute

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!

like image 261
zik Avatar asked Jan 13 '23 04:01

zik


2 Answers

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

like image 178
palaѕн Avatar answered Jan 22 '23 16:01

palaѕн


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

like image 23
QueueHammer Avatar answered Jan 22 '23 18:01

QueueHammer