jQuery tooltip encodes text in title attribute

Question

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?

Answer 1

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" );
  }
});  

Answer 2

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/