Подсказка по пользовательскому интерфейсу Jquery не поддерживает HTML-контент

Вместо этого:

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

используйте это для лучшей производительности

$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});

Я решил его с помощью специального тега данных, потому что атрибут title требуется в любом случае.

$("[data-tooltip]").each(function(i, e) {
    var tag = $(e);
    if (tag.is("[title]") === false) {
        tag.attr("title", "");
    }
});

$(document).tooltip({
    items: "[data-tooltip]",
    content: function () {
        return $(this).attr("data-tooltip");
    }
});

Как и это, html соответствует, а всплывающие подсказки отображаются только для желаемых тегов.

Вы также можете достичь этого полностью без jQueryUI, используя стили CSS. См. Фрагмент ниже:

div#Tooltip_Text_container {
  max-width: 25em;
  height: auto;
  display: inline;
  position: relative;
}

div#Tooltip_Text_container a {
  text-decoration: none;
  color: black;
  cursor: default;
  font-weight: normal;
}

div#Tooltip_Text_container a span.tooltips {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;
  position: absolute;
  left: 10px;
  top: 18px;
  width: 30em;
  border: 1px solid #404040;
  padding: 0.2em 0.5em;
  cursor: default;
  line-height: 140%;
  font-size: 12px;
  font-family: 'Segoe UI';
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 7px 7px 5px -5px #666;
  -webkit-box-shadow: 7px 7px 5px -5px #666;
  box-shadow: 7px 7px 5px -5px #666;
  background: #E4E5F0  repeat-x;
}

div#Tooltip_Text_container:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

div#Tooltip_Text_container img {
  left: -10px;
}

div#Tooltip_Text_container:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

<div id="Tooltip_Text_container">
  <span>Tooltip headline</span>
  <a href="#">
    <span class="tooltips">
        <b>This is&nbsp;</b> a tooltip<br/>
        <b>This is&nbsp;</b> another tooltip<br/>
    </span>
  </a>
</div>

Первый диапазон для отображаемого текста, второй диапазон для скрытого текста, который отображается при наведении на него.

Чтобы избежать размещения тегов HTML в атрибуте title, другое решение - использовать уценку. Например, вы можете использовать [br] для представления разрыва строки, а затем выполнить простую замену в функции содержимого.

В атрибуте title:

"Sample Line 1[br][br]Sample Line 2"

В вашей функции содержимого:

content: function () {
    return $(this).attr('title').replace(/\[br\]/g,"<br />");
}

другим решением будет захват текста внутри тега title, а затем использовать метод .html() для jQuery для создания содержимого всплывающей подсказки.

$(function() {
  $(document).tooltip({
    position: {
      using: function(position, feedback) {
        $(this).css(position);
        var txt = $(this).text();
        $(this).html(txt);
        $("<div>")
          .addClass("arrow")
          .addClass(feedback.vertical)
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }
  });
});

Пример: http://jsfiddle.net/hamzeen/0qwxfgjo/

Вы можете изменить исходный код jquery-ui.js, найти эту функцию по умолчанию для получения содержимого атрибута заголовка целевого элемента.

var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
    content: function() {
        // support: IE<9, Opera in jQuery <1.7
        // .text() can't accept undefined, so coerce to a string
        var title = $( this ).attr( "title" ) || "";
        // Escape title, since we're going from an attribute to raw HTML
        return $( "<a>" ).text( title ).html();
    },

измените его на

var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
    content: function() {
        // support: IE<9, Opera in jQuery <1.7
        // .text() can't accept undefined, so coerce to a string
        if($(this).attr('ignoreHtml')==='false'){
            return $(this).prop("title");
        }
        var title = $( this ).attr( "title" ) || "";
        // Escape title, since we're going from an attribute to raw HTML
        return $( "<a>" ).text( title ).html();
    },

поэтому всякий раз, когда вы хотите отображать подсказки html, просто добавьте атрибут ignoreHtml = 'false' в ваш целевой элемент html; например, <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

Чтобы расширить ответ на @Andrew Whitaker выше, вы можете преобразовать свою подсказку в html-объекты в теге заголовка, чтобы не помещать raw html прямо в ваши атрибуты:

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

<script src="/jquery.min.js"></script>
<script src="/jquery-ui.js"></script>
<div class="tooltip" title="&lt;div&gt;check out these kool &lt;i&gt;italics&lt;/i&gt; and this &lt;span style=&quot;color:red&quot;&gt;red text&lt;/span&gt;&lt;/div&gt;">Hover Here</div>

Чаще всего всплывающая подсказка хранится в переменной php, так что вам нужно только:

<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>

Из http://bugs.jqueryui.com/ticket/9019

Ввод HTML в атрибут title недействителен HTML, и мы теперь избегая его, чтобы предотвратить уязвимости XSS (см. # 8861).

Если вам нужны HTML в ваших подсказках, используйте опцию content - http://api.jqueryui.com/tooltip/#option-content.

Попробуйте использовать javascript для установки подсказок html, см. ниже

$( ".selector" ).tooltip({
   content: "Here is your HTML"
});

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

         $('[rel=tooltip]').tooltip({
             position: {
                 my: "center bottom-20",
                 at: "center top",
                 using: function (position, feedback) {
                     $(this).css(position);
                     $("<div>")
                         .addClass("arrow")
                         .addClass(feedback.vertical)
                         .addClass(feedback.horizontal)
                         .appendTo(this);
                 }
             }
         });
     });

спасибо за сообщение и решение выше.

Я немного обновил код. Надеюсь, это поможет вам.

http://jsfiddle.net/pragneshkaria/Qv6L2/49/

Пока мы используем jQuery ( > v1.8), мы можем проанализировать входящую строку с помощью $.parseHTML().

$('.tooltip').tooltip({
    content: function () {
        var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
        return tooltipContent;
    },
}); 

Мы проанализируем атрибут входящей строки для неприятных вещей, а затем преобразуем его обратно в jQuery-читаемый HTML. Красота заключается в том, что к тому времени, когда он попадает в парсер, строки уже объединяются, поэтому не имеет значения, пытается ли кто-то разбить тэг script на отдельные строки. Если вы застряли с помощью всплывающих подсказок jQuery, это похоже на твердое решение.

добавить html = true в параметры всплывающей подсказки

$({selector}).tooltip({html: true});

Обновление
это не актуально для свойства jQuery ui tooltip - это верно в bootstrap ui tooltip - мой плохой!