jquery UI工具提示不支持HTML内容
今天，我用jQuery 1.9.1升级了所有的jQuery插件。 我开始使用jQueryUI工具提示与jquery.ui.1.10.2。 一切都很好。 但是当我在内容中使用HTML标签时（我在应用工具提示的元素的title属性中），我注意到HTML不被支持。
这是我的工具提示的截图：
如何使HTML内容与1.10.2中的jQueryUI工具提示一起工作？
编辑 ：由于这原来是一个受欢迎的答案，我添加@crush在下面的评论中提到的免责声明。 如果您使用此解决scheme，请注意您正在打开自己的XSS漏洞 。 只有使用这个解决scheme，如果你知道你在做什么 ，可以确定属性中的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/
我用一个自定义的数据标签来解决它，因为无论如何，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，工具提示只显示想要的标签。
而不是这个：
$(document).tooltip({ content: function () { return $(this).prop('title'); } });
使用这个更好的性能
$(selector).tooltip({ content: function () { return this.getAttribute("title"); }, });
您也可以通过使用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>Tooltip headline</span> <a href="#"> <span class="tooltips"> <b>This is </b> a tooltip<br/> <b>This is </b> another tooltip<br/> </span> </a> </div>
为了避免在标题属性中放置HTML标签，另一个解决scheme是使用markdown。 例如，您可以使用[br]来表示换行符，然后在内容函数中执行一个简单的replace。
在标题属性中：
"Sample Line 1[br][br]Sample Line 2"
在您的内容function中 ：
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); } } }); });
感谢上面的post和解决scheme。
我已经更新了一点点的代码。 希望这可以帮助你。
从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" });
为了扩展@Andrew Whitaker的上面的答案，你可以将你的工具提示转换为标题标签中的html实体，以避免直接在你的属性中input原始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>
你可以修改源代码“jquery-ui.js”，find这个默认函数来获取目标元素的标题属性内容。
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>
另一个解决scheme是抓取title标签中的文本，然后使用jQuery的.html()方法来构build工具提示的内容。
$(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（> v1.8），我们就可以用$ .parseHTML（）parsing传入的string。
$('.tooltip').tooltip({ content: function () { var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) ); return tooltipContent; }, });
我们将parsing传入string的不愉快的属性，然后将其转换回jQuery可读的HTML。 这样做的好处在于，当它到达parsing器的时候，这些string已经是连接的了，所以如果有人试图将脚本标签拆分为不同的string，那并不重要。 如果你使用jQuery的工具提示卡，这似乎是一个可靠的解决scheme。
将html = true添加到工具提示选项
$({selector}).tooltip({html: true});
更新
这与jQuery ui tooltip属性无关 – 在bootstrap ui tooltip中是真实的 – 我的不好！
