Почему JQuery Tooltip не показывает содержимое html?

Я создал подсказку jQuery на странице html. Я хочу показать всплывающую подсказку с содержимым html внутри гиперссылки. Но JQuery Tooltip просто показывает весь текст html как обычный текст внутри всплывающей подсказки, но не имеет html-формата. Существует пример jQuery Tooltip.

<head>
    <title>jQuery Tooltip</title>
    <link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css'; return false;" />
    <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 what this widgets</font>">Tooltips</a>
</body>

В подсказке вместо того, чтобы показывать текст "Что это за виджеты" в Красном цвете, отображается "<font color='#FF0000'>That what this widgets</font>". Формат html не применяется к тексту всплывающей подсказки. Похоже, что всплывающая подсказка не распознает формат html. Проблема заключается в том, что стиль на всплывающей подсказке неверен или может быть подсказка jQuery не поддерживает html-контент.

Я хочу знать, почему моя подсказка jQuery не может отображать содержимое html? Мне нужна помощь по моей проблеме.

ОТВЕТЫ

Ответ 1

Используйте параметр content, предоставленный tooltip

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

Демо: Plunker

Ответ 2

Лучше настроить цвет с помощью css:

Код Javascript:

$(function () {
    $(document).tooltip({ tooltipClass: "custom-tooltip-styling" });
});

CSS

.custom-tooltip-styling { color: #ff0000; }

Демо:   http://jsfiddle.net/netme/3Ckk3/2/