Jquery UI tooltip does not support html content

Question

Today, I upgraded all of my jQuery plugs-in with jQuery 1.9.1. And I started to use jQueryUI tooltip with jquery.ui.1.10.2. Everything was good. But when I used HTML tags in the content (in the title attribute of the element I was applying the tooltip to), I noticed that HTML is not supported.

This is screenshot of my tooltip:

How can I make HTML content work with jQueryUI tooltip in 1.10.2?

Answer 1

Edit: Since this turned out to be a popular answer, I'm adding the disclaimer that @crush mentioned in a comment below. If you use this work around, be aware that you're opening yourself up for an XSS vulnerability. Only use this solution if you know what you're doing and can be certain of the HTML content in the attribute.

---

The easiest way to do this is to supply a function to the content option that overrides the default behavior:

$(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

Example: http://jsfiddle.net/Aa5nK/12/

Another option would be to override the tooltip widget with your own that changes the content option:

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

Now, every time you call .tooltip, HTML content will be returned.

Example: http://jsfiddle.net/Aa5nK/14/