CODEWITHSUNDEEP
jquery-uijquery-tooltipjquery-ui-tooltip
dragonfly
dragonfly

Reputation: 17783

jQuery tooltip encodes text in title attribute

I've updated jQuery UI to latest version (from 1.9.x) and there's something that I can not resolve, namely: in title attriutes I sometimes store HTML, for instance:

Start Date: 2012.01.01<br />End Date: 2012.02.01

Before upgrade tooltip text was not encoded so I saw Start & End date in two separate lines. However now, text in encoded and I see
. Is there a way to resolve it?

Upvotes: 2

Views: 4042

Answers (2)

lsu_guy
lsu_guy

Reputation: 1595

My answer is an extension to what Fran said.

Ran into this as well. You can store simple html tags in title. Instead of just calling tooltip, you now have to do some more work. You have to return your html coded title. I have tested this with bold < b>, underline < u> and breakline < /br>. 

$( document ).tooltip( {
  content: function() {
    return  $( this ).attr( "title" );
  }
});

Upvotes: 4

Fran Verona
Fran Verona

Reputation: 5476

The problem is that title doesn't admit HTML tags. To apply style to text in title attribute using Tooltips, you should use something like this:

HTML:

<a id="mytooltip" href="#" title="">Tooltips</a>

JS:

$('#mytooltip').tooltip({
   items: "[title]",
   content: function() {
     return "<b>That's what this widget is</b>";
   }
});

You can use any HTML tags (even tables, images, etc) and JQueryUI Tooltip Show it running in JSBin: http://jsbin.com/ukejok/3/

Upvotes: 1

Related Questions