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!

You can simply change how the plugins pull data - instead of pulling text from the title attribute, you can make it to search in the target element for a specific div, or even pull data from customized HTML5 data- attributes. You'll have to dig into the source code to make the changes. — Terry
– Terry, Commented Jun 11, 2013 at 7:54
jQuery UI's tooltip widget can display arbitrary content and supports Internet Explorer 6, 7 and 8. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jun 11, 2013 at 7:55

QueueHammer · Accepted Answer · 2014-02-12 16:51:52Z

5

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

answered Feb 12, 2014 at 16:51

QueueHammer

10.9k13 gold badges69 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palaѕн · Accepted Answer · 2013-06-11 08:05:25Z

4

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

answered Jun 11, 2013 at 8:05

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

3 Comments

zik Over a year ago

Thanks I'll take a look at this. Is this backwards compatible? My concern is that I'm using jQuery version 1.5.1 (not my choice). I can update the version of jQuery but I need to make sure any components will support IE8.

palaѕн Over a year ago

@Kiz you can use the jQuery Migrate Plugin for that..

zik Over a year ago

Thanks, ended up editing tooltipster but by changing the content as per your answer!

pvnarula · Accepted Answer · 2013-06-11 07:55:06Z

1

You can use twitter bootstrap for the tooltips. There are many expandable plugins are available online.

http://twitter.github.com/bootstrap/javascript.html

answered Jun 11, 2013 at 7:55

pvnarula

2,84120 silver badges22 bronze badges

Comments

bobs12 · Accepted Answer · 2013-08-26 11:29:37Z

1

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, e.g. 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.

answered Aug 26, 2013 at 11:29

bobs12

1546 bronze badges

Comments

Saurabh Dixit · Accepted Answer · 2013-06-11 07:54:18Z

0

You can try twitter bootstrap popover, and you can customize the css.

have a look into it.

http://twitter.github.io/bootstrap/javascript.html#popovers

answered Jun 11, 2013 at 7:54

Saurabh Dixit

6334 silver badges16 bronze badges

Comments

Tiago Romero Garcia · Accepted Answer · 2015-03-30 18:57:47Z

0

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: //...
      });

answered Mar 30, 2015 at 18:57

Tiago Romero Garcia

1,0789 silver badges12 bronze badges

Comments

skparwal · Accepted Answer · 2013-06-11 07:56:17Z

-1

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.

e.g.

<div tooltip_text="hello world!"> ... </div>

answered Jun 11, 2013 at 7:56

skparwal

1,0746 silver badges15 bronze badges

1 Comment

Terry Over a year ago

that's invalid HTML. You need to use data- attributes, eg data-tooltip-text

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related