今天，我用 jQuery 1.9.1 升级了我所有的 jQuery 插件。我开始使用带有 jquery.ui.1.10.2 的 jQueryUI 工具提示。一切都很好。但是当我在内容中使用 HTML 标记时（在title我应用工具提示的元素的属性中），我注意到不支持 HTML。
这是我的工具提示的屏幕截图：
如何使 HTML 内容与 1.10.2 中的 jQueryUI 工具提示一起使用？
user1372430
问问题
116021 次
15 回答
193
编辑：由于事实证明这是一个流行的答案，我添加了@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/
于 2013-03-31T20:53:37.447 回答
19
而不是这个：
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
使用它以获得更好的性能
$(selector).tooltip({
content: function () {
return this.getAttribute("title");
},
});
于 2014-05-20T04:13:54.423 回答
14
我用自定义数据标签解决了这个问题，因为无论如何都需要一个标题属性。
$("[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 标准，并且工具提示仅针对想要的标签显示。
于 2014-04-13T16:08:32.923 回答
6
您也可以通过使用 CSS 样式完全不使用 jQueryUI 来实现这一点。请参阅下面的片段：
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>第一个跨度用于显示文本，第二个跨度用于隐藏文本，当您将鼠标悬停在其上时会显示。
于 2017-02-24T12:00:50.727 回答
3
要扩展上面@Andrew Whitaker 的答案，您可以将工具提示转换为标题标签中的 html 实体，以避免将原始 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>
于 2015-10-30T12:31:56.267 回答
2
来自http://bugs.jqueryui.com/ticket/9019
将 HTML 放在 title 属性中不是有效的 HTML，我们现在将其转义以防止 XSS 漏洞（参见#8861）。
如果您的工具提示中需要 HTML，请使用内容选项 - http://api.jqueryui.com/tooltip/#option-content。
尝试使用javascript设置html工具提示，见下文
$( ".selector" ).tooltip({
content: "Here is your HTML"
});
于 2015-03-09T12:15:06.047 回答
2
为了避免在 title 属性中放置 HTML 标签，另一种解决方案是使用 markdown。例如，您可以使用 [br] 表示换行符，然后在内容函数中执行简单的替换。
在标题属性中：
"Sample Line 1[br][br]Sample Line 2"
在您的内容功能中：
content: function () {
return $(this).attr('title').replace(/\[br\]/g,"<br />");
}
于 2015-04-17T23:41:56.820 回答
2
另一种解决方案是抓取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/
于 2016-07-13T03:34:53.007 回答
1
$(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);
}
}
});
});
感谢上面的帖子和解决方案。
我已经稍微更新了代码。希望这可以帮助你。
于 2013-08-06T12:16:31.770 回答
1
只要我们使用 jQuery (> v1.8)，我们就可以使用 $.parseHTML() 解析传入的字符串。
$('.tooltip').tooltip({
content: function () {
var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
return tooltipContent;
},
});
我们将解析传入字符串的属性以查找不愉快的内容，然后将其转换回 jQuery 可读的 HTML。这样做的美妙之处在于，当它到达解析器时，字符串已经连接起来，所以如果有人试图将脚本标签拆分成单独的字符串并不重要。如果您无法使用 jQuery 的工具提示，这似乎是一个可靠的解决方案。
于 2015-01-15T09:45:05.843 回答
1
您可以修改源代码 '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 提示时，只需在目标 html 元素上添加一个属性 ignoreHtml='false'；像这样
<td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>
于 2016-03-16T02:28:32.940 回答
1
上述解决方案都不适合我。这个对我有用：
$(document).ready(function()
{
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
html: true
});
});
于 2019-09-05T08:06:27.673 回答
0
html标记
类“.why”的工具提示控件和类“.customTolltip”的工具提示内容区
$(function () {
$('.why').attr('title', function () {
return $(this).next('.customTolltip').remove().html();
});
$(document).tooltip();
});
于 2019-03-11T11:00:51.430 回答
0
在保持 HTML 的其余部分被转义的同时，替换\n或转义就可以了：<br/>
$(document).tooltip({
content: function() {
var title = $(this).attr("title") || "";
return $("<a>").text(title).html().replace(/<br *\/?>/, "<br/>");
},
});
于 2020-08-04T09:57:17.410 回答
-1
将 html = true 添加到工具提示选项
$({selector}).tooltip({html: true});
更新
它与 jQuery ui 工具提示属性无关 - 在引导 ui 工具提示中是正确的 - 我的错！
于 2013-10-27T13:03:31.973 回答