Search code examples
jqueryhtmlstylesheet

Why jQuery Tooltip does not show html content?

I have created a jQuery Tooltip on html page. I want to show a tooltip with html content inside on a hyperlink. But the jQuery Tooltip just show all html text as normal text inside the tooltip but does not have the html format. There is an example of jQuery Tooltip.

<head>
    <title>jQuery Tooltip</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

    <script>
        $(function() {
            $(document).tooltip();
        });
    </script>
    <style>
        label {
            display: inline-block;
            width: 5em;
        }
    </style>
</head>
<body>
    <a href="#" title="<font color='#FF0000'>That's what this widgets</font>">Tooltips</a>
</body>

The tooltip, instead of showing the text "That's what this widgets" in Red color, it shows "<font color='#FF0000'>That's what this widgets</font>". The html format does not apply on the tooltip text. It seem that the tooltip doesn't recognize the html format. The problem seem to be the style on tooltip is not correct or may be the jQuery tooltip doesn't support for html content.

I want to know why my jQuery tooltip cannot show html content? I need some help on my issue.

Solution

  • Use the content option provided by tooltip

    $(function(){
  $('[title]').tooltip({
    content: function(){
      var element = $( this );
      return element.attr('title')
    }
  });
});

    Demo: Plunker