Сегодня я обновил все мои jQuery-подключаемые модули с помощью jQuery 1.9.1. И я начал использовать jQueryUI tooltip с jquery.ui.1.10.2. Все было хорошо. Но когда я использовал теги HTML в контенте (в атрибуте title элемента, к которому я применял всплывающую подсказку), я заметил, что HTML не поддерживается.
Это скриншот моей подсказки:
Как я могу создать HTML-контент с помощью подсказки jQueryUI в 1.10.2?
Изменить. Поскольку это оказалось популярным ответом, я добавляю отказ от @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/
Вместо этого:
$(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><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>Чтобы избежать размещения тегов HTML в атрибуте title, другое решение - использовать уценку. Например, вы можете использовать [br] для представления разрыва строки, а затем выполнить простую замену в функции содержимого.
В атрибуте title:
"Sample Line 1[br][br]Sample Line 2"
В вашей функции содержимого:
content: function () {
return $(this).attr('title').replace(/\[br\]/g,"<br />");
}
Чтобы расширить ответ на @Andrew Whitaker выше, вы можете преобразовать свою подсказку в html-объекты в теге заголовка, чтобы не помещать raw 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>$(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);
}
}
});
});
спасибо за сообщение и решение выше.
Я немного обновил код. Надеюсь, это поможет вам.
Пока мы используем jQuery ( > v1.8), мы можем проанализировать входящую строку с помощью $.parseHTML().
$('.tooltip').tooltip({
content: function () {
var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
return tooltipContent;
},
});
Мы проанализируем атрибут входящей строки для неприятных вещей, а затем преобразуем его обратно в jQuery-читаемый HTML. Красота заключается в том, что к тому времени, когда он попадает в парсер, строки уже объединяются, поэтому не имеет значения, пытается ли кто-то разбить тэг script на отдельные строки. Если вы застряли с помощью всплывающих подсказок jQuery, это похоже на твердое решение.
Из 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"
});
Вы можете изменить исходный код 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>
другим решением будет захват текста внутри тега 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);
}
}
});
});
HTML-разметка
Элемент управления Tool-tip с классом ".why" и область содержимого Tool-tip с классом ".customTolltip"
$(function () {
$('.why').attr('title', function () {
return $(this).next('.customTolltip').remove().html();
});
$(document).tooltip();
});
Ни одно из приведенных выше решений не помогло мне. Этот работает для меня:
$(document).ready(function()
{
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
html: true
});
});
добавить html = true в параметры всплывающей подсказки
$({selector}).tooltip({html: true});
Обновление
это не актуально для свойства jQuery ui tooltip - это верно в bootstrap ui tooltip - мой плохой!