Сегодня я обновил все свои подключаемые модули jQuery с помощью jQuery 1.9.1. И я начал использовать всплывающую подсказку jQueryUI с jquery.ui.1.10.2. Все было хорошо. Но когда я использовал HTML-теги в содержимом (в title
атрибуте элемента, к которому я применял всплывающую подсказку), я заметил, что HTML не поддерживается.
Это скриншот моей всплывающей подсказки:
Как я могу заставить HTML-контент работать с всплывающей подсказкой jQueryUI в 1.10.2?
jquery
html
jquery-ui
jquery-ui-tooltip
Эндрю Уитакер
источник
источник
<b></b>
Прямо во всплывающей подсказке есть теги.title
атрибуте, который не поддерживается с 1.10.Ответы:
Изменить : поскольку это оказался популярный ответ, я добавляю отказ от ответственности, который @crush упомянул в комментарии ниже. Если вы используете этот обходной путь, имейте в виду, что вы открываете себя для уязвимости XSS . Используйте это решение, только если вы знаете, что делаете, и можете быть уверены в содержании HTML в атрибуте.
Самый простой способ сделать это - предоставить функцию
content
опции, которая отменяет поведение по умолчанию:$(function () { $(document).tooltip({ content: function () { return $(this).prop('title'); } }); });
Пример: http://jsfiddle.net/Aa5nK/12/
Другой вариант - переопределить виджет всплывающей подсказки своим собственным, который изменяет
content
параметр:$.widget("ui.tooltip", $.ui.tooltip, { options: { content: function () { return $(this).prop('title'); } } });
Теперь каждый раз, когда вы звоните
.tooltip
, будет возвращаться HTML-контент.Пример: http://jsfiddle.net/Aa5nK/14/
источник
Putting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities
. В ответе Эндрю заголовок по-прежнему должен содержать недопустимый HTML.Вместо этого:
$(document).tooltip({ content: function () { return $(this).prop('title'); } });
используйте это для лучшей производительности
$(selector).tooltip({ content: function () { return this.getAttribute("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><b>Tooltip headline</b></span> <a href="#"> <span class="tooltips"> <b>This is </b> a tooltip<br/> <b>This is </b> another tooltip<br/> </span> </a> <br/>Move the mousepointer to the tooltip headline above. </div>
Первый диапазон предназначен для отображаемого текста, второй диапазон - для скрытого текста, который отображается при наведении на него курсора.
источник
Чтобы расширить ответ @Andrew Whitaker выше, вы можете преобразовать всплывающую подсказку в объекты html в теге title, чтобы не помещать необработанный html непосредственно в свои атрибуты:
$('div').tooltip({ content: function () { return $(this).prop('title'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <div class="tooltip" title="<div>check out these kool <i>italics</i> and this <span style="color:red">red text</span></div>">Hover Here</div>
Чаще всего всплывающая подсказка в любом случае сохраняется в переменной php, поэтому вам понадобится только:
<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>
источник
Чтобы избежать размещения HTML-тегов в атрибуте title, другим решением является использование уценки. Например, вы можете использовать [br] для обозначения разрыва строки, а затем выполнить простую замену в функции содержимого.
В атрибуте title:
"Sample Line 1[br][br]Sample Line 2"
В вашей контентной функции :
content: function () { return $(this).attr('title').replace(/\[br\]/g,"<br />"); }
источник
$(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; }, });
Мы проанализируем атрибут входящей строки на предмет неприятных вещей, а затем преобразуем его обратно в HTML, читаемый с помощью jQuery. Прелесть этого заключается в том, что к тому времени, когда он попадает в парсер, строки уже связаны, поэтому не имеет значения, пытается ли кто-то разбить тег скрипта на отдельные строки. Если вы застряли в использовании всплывающих подсказок jQuery, это будет надежным решением.
источник
С http://bugs.jqueryui.com/ticket/9019
Попробуйте использовать javascript для установки всплывающих подсказок html, см. Ниже
$( ".selector" ).tooltip({ content: "Here is your HTML" });
источник
Вы можете изменить исходный код jquery-ui.js, найти эту функцию по умолчанию для получения содержимого атрибута title целевого элемента.
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>
источник
другим решением будет захват текста внутри
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/
источник
Ни одно из приведенных выше решений не помогло мне. Это работает для меня:
$(document).ready(function() { $('body').tooltip({ selector: '[data-toggle="tooltip"]', html: true }); });
источник
Разметка HTML
Элемент управления всплывающей подсказки с классом «.why» и область содержимого всплывающей подсказки с классом «.customTolltip»
$(function () { $('.why').attr('title', function () { return $(this).next('.customTolltip').remove().html(); }); $(document).tooltip(); });
источник
Замена
\n
или экранированного<br/>
делает трюк, при этом остальная часть HTML остается экранированной:$(document).tooltip({ content: function() { var title = $(this).attr("title") || ""; return $("<a>").text(title).html().replace(/<br *\/?>/, "<br/>"); }, });
источник
добавить html = true в параметры всплывающей подсказки
$({selector}).tooltip({html: true});
Обновить,
это не актуально для свойства всплывающей подсказки jQuery ui - это правда в всплывающей подсказке пользовательского интерфейса начальной загрузки - моя проблема!
источник