jQuery UI 工具提示不支持 html 内容
Posted
技术标签:
【中文标题】jQuery UI 工具提示不支持 html 内容【英文标题】：Jquery UI tooltip does not support html content 【发布时间】：2013-03-21 23:25:43 【问题描述】：今天，我用 jQuery 1.9.1 升级了我所有的 jQuery 插件。我开始使用带有 jquery.ui.1.10.2 的 jQueryUI 工具提示。一切都很好。但是当我在内容中使用 html 标记时（在我应用工具提示的元素的 title 属性中），我注意到不支持 HTML。
这是我的工具提示截图：
如何在 1.10.2 中使 HTML 内容与 jQueryUI 工具提示一起使用？
【问题讨论】：
这是你升级后刚刚坏掉的东西吗？在 jQuery 1.9.1、jQuery UI 1.9.2 jsfiddle.net/2n3DL/1 中对我来说似乎工作正常 嗯。这是个好主意。如果你让我，我可以再问一个问题吗？好的，我有一个工具提示图标，它有一个名为“工具提示”的类，如下所示： great HTML工具提示文本！">我怎样才能这样使用？最好的问候。 查看 metadepts 更新了 jquery ui 1.10.2 here 和 jquery 1.9.1。它仍然有效。 @phobos：不，它没有。工具提示中有<b></b> 标签。
将鼠标悬停在“一些输入”上（直接返回 HTML 内容的工具提示可以正常工作）。我知道 OP 的问题有点不清楚，但我假设他或她在 title 属性中使用 HTML，从 1.10 开始不受支持。
【参考方案1】：
编辑：由于这是一个受欢迎的答案，我添加了@crush 在下面的评论中提到的免责声明。如果您使用此解决方法，be aware that you're opening yourself up for an XSS vulnerability。仅当您知道自己在做什么并且可以确定属性中的 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/
【讨论】：
唯一的问题是它绕过了jQuery开始在标题属性中转义HTML的原因。 @eidylonPutting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities。在安德鲁的回答中，标题仍然必须包含 HTML，这是无效的。
您可以在 title 属性中包含内容的文本部分，然后在您的内容回调中构建周围的 HTML 位来解决这个问题（只要您知道在初始化时会是什么)
这个答案有很多赞成票。但我发现 Minh 的回答 [***.com/a/28941759/1063730] 更准确。引用与您相同的票证，但使用内容选项而不是在标题标签中推送完整的 html。【参考方案2】：
而不是这个：
$(document).tooltip(
content: function ()
return $(this).prop('title');
);
使用它以获得更好的性能
$(selector).tooltip(
content: function ()
return this.getAttribute("title");
,
);
【讨论】：
是的，性能更好，因为我只有几个带有工具提示的元素【参考方案3】：我用自定义数据标签解决了这个问题，因为无论如何都需要一个标题属性。
$("[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 标准，并且工具提示仅针对想要的标签显示。
【讨论】：
【参考方案4】：您也可以通过使用 CSS 样式完全不使用 jQueryUI 来实现这一点。请参阅下面的 sn-p：
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>第一个跨度用于显示文本，第二个跨度用于隐藏文本，当您将鼠标悬停在其上时会显示。
【讨论】：
【参考方案5】：要扩展上面@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>
【讨论】：
【参考方案6】：来自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"
);
【讨论】：
可能是由于 jQuery 版本过时，但是：我需要在.selector 所指的元素上添加一个空的标题标签！【参考方案7】：
为了避免在title属性中放置HTML标签，另一种解决方案是使用markdown。例如，您可以使用 [br] 表示换行符，然后在内容函数中执行简单的替换。
在title属性中：
"Sample Line 1[br][br]Sample Line 2"
在您的内容功能中：
content: function ()
return $(this).attr('title').replace(/\[br\]/g,"<br />");
【讨论】：
【参考方案8】：另一种解决方案是抓取title标签内的文本，然后使用jQuery的.html()方法来构造工具提示的内容。
$(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/
【讨论】：
【参考方案9】：$(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/
【讨论】：
【参考方案10】：只要我们使用 jQuery (> v1.8)，我们就可以使用 $.parseHTML() 解析传入的字符串。
$('.tooltip').tooltip(
content: function ()
var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
return tooltipContent;
,
);
我们将解析传入字符串的属性以查找不愉快的内容，然后将其转换回 jQuery 可读的 HTML。这样做的好处是，当它到达解析器时，字符串已经连接起来，所以如果有人试图将脚本标签拆分成单独的字符串并不重要。如果您无法使用 jQuery 的工具提示，这似乎是一个可靠的解决方案。
【讨论】：
【参考方案11】：你可以修改源代码'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 提示时，只需在目标 html 元素上添加一个属性 ignoreHtml='false'；
像这样
<td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>
【讨论】：
【参考方案12】：以上解决方案都不适合我。这个对我有用：
$(document).ready(function()
$('body').tooltip(
selector: '[data-toggle="tooltip"]',
html: true
);
);
【讨论】：
【参考方案13】：HTML 标记
类“.why”的工具提示控件和类“.customTolltip”的工具提示内容区
$(function ()
$('.why').attr('title', function ()
return $(this).next('.customTolltip').remove().html();
);
$(document).tooltip();
);
【讨论】：
【参考方案14】：替换 \n 或转义的 <br/> 可以解决问题，同时保持 HTML 的其余部分转义：
$(document).tooltip(
content: function()
var title = $(this).attr("title") || "";
return $("<a>").text(title).html().replace(/<br *\/?>/, "<br/>");
,
);
【讨论】：
【参考方案15】：在工具提示选项中添加 html = true
$(selector).tooltip(html: true);
更新这与 jQuery ui 工具提示属性无关 - 在 bootstrap ui 工具提示中是正确的 - 我的错！
【讨论】：
对不起，这对我不起作用。官方文档中也没有提到“html”选项。 这是引导 2.3 工具提示而不是 jquery-ui 工具提示 工具提示没有 prop "html"以上是关于jQuery UI 工具提示不支持 html 内容的主要内容，如果未能解决你的问题，请参考以下文章
是否可以在 jquery 函数中为 JQuery UI 工具提示设置不同的 UI 主题