Jquery UI 工具提示不支持 html 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15734105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery UI tooltip does not support html content
提问by Andrew Whitaker
Today, I upgraded all of my jQuery plugs-in with jQuery 1.9.1. And I started to use jQueryUI tooltip with jquery.ui.1.10.2. Everything was good. But when I used HTML tags in the content (in the titleattribute of the element I was applying the tooltip to), I noticed that HTML is not supported.
今天，我用 jQuery 1.9.1 升级了我所有的 jQuery 插件。我开始在 jquery.ui.1.10.2 中使用 jQueryUI 工具提示。一切都很好。但是当我在内容中使用 HTML 标签时（在title我应用工具提示的元素的属性中），我注意到不支持 HTML。
This is screenshot of my tooltip:
这是我的工具提示的屏幕截图：
How can I make HTML content work with jQueryUI tooltip in 1.10.2?
如何在 1.10.2 中使 HTML 内容与 jQueryUI 工具提示一起使用？
回答by Andrew Whitaker
Edit: Since this turned out to be a popular answer, I'm adding the disclaimer that @crushmentioned in a comment below. If you use this work around, be aware that you're opening yourself up for an XSS vulnerability. Only use this solution if you know what you're doingand can be certainof the HTML content in the attribute.
编辑：由于结果证明这是一个受欢迎的答案，我添加了@crush在下面的评论中提到的免责声明。如果您使用此变通方法，请注意您正在为 XSS 漏洞敞开大门。只有当你使用此解决方案知道你在做什么，可以是某些属性中的HTML内容。
The easiest way to do this is to supply a function to the contentoption that overrides the default behavior:
最简单的方法是为content覆盖默认行为的选项提供一个函数：
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
Example:http://jsfiddle.net/Aa5nK/12/
示例：http : //jsfiddle.net/Aa5nK/12/
Another option would be to override the tooltip widget with your own that changes the contentoption:
另一种选择是使用您自己的更改content选项的工具提示小部件覆盖：
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
Now, every time you call .tooltip, HTML content will be returned.
现在，每次调用.tooltip，都会返回 HTML 内容。
Example:http://jsfiddle.net/Aa5nK/14/
回答by Profesor08
Instead of this:
取而代之的是：
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
use this for better performance
使用它以获得更好的性能
$(selector).tooltip({
content: function () {
return this.getAttribute("title");
},
});
回答by Chris
I solved it with a custom data tag, because a title attribute is required anyway.
我用自定义数据标签解决了它，因为无论如何都需要标题属性。
$("[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");
}
});
Like this it is html conform and the tooltips are only shown for wanted tags.
像这样它符合 html 并且工具提示只显示想要的标签。
回答by Matt
You can also achieve this completely without jQueryUI by using CSS styles. See the snippet below:
您也可以通过使用 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>The first span is for the displayed text, the second span for the hidden text, which is shown when you hover over it.
第一个跨度用于显示文本，第二个跨度用于隐藏文本，当您将鼠标悬停在其上时会显示。
回答by Flareman2020
To avoid placing HTML tags in the title attribute, another solution is to use markdown. For instance, you could use [br] to represent a line break, then perform a simple replace in the content function.
为了避免在 title 属性中放置 HTML 标签，另一种解决方案是使用 Markdown。例如，您可以使用 [br] 表示换行符，然后在内容函数中执行简单的替换。
In title attribute:
在标题属性中：
"Sample Line 1[br][br]Sample Line 2"
In your content function:
在您的内容功能中：
content: function () {
return $(this).attr('title').replace(/\[br\]/g,"<br />");
}
回答by billynoah
To expand on @Andrew Whitaker's answer above, you can convert your tooltip to html entities within the title tag so as to avoid putting raw html directly in your attributes:
要扩展上面@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>More often than not, the tooltip is stored in a php variable anyway so you'd only need:
通常情况下，工具提示无论如何都存储在 php 变量中，因此您只需要：
<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>
回答by Joker
You may modify the source code 'jquery-ui.js' , find this default function for retrieving target element's title attribute content.
你可以修改源代码 '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();
},
change it to
将其更改为
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();
},
thus whenever you want to display html tips , just add an attribute ignoreHtml='false' on your target html element;
like this <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>
因此，每当您想显示 html 提示时，只需在目标 html 元素上添加一个属性 ignoreHtml='false' ；像这样<td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>
回答by Hamzeen Hameem
another solution will be to grab the text inside the titletag & then use .html()method of jQuery to construct the content of the tooltip.
另一种解决方案是抓取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);
}
}
});
});
回答by Pragnesh Karia
$(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);
}
}
});
});
thanks for post and solution above.
感谢上面的帖子和解决方案。
I have updated the code little bit. Hope this might help you.
我已经稍微更新了代码。希望这可以帮助你。
回答by ghettosoak
As long as we're using jQuery (> v1.8), we can parse the incoming string with $.parseHTML().
只要我们使用 jQuery (> v1.8)，我们就可以使用 $.parseHTML() 解析传入的字符串。
$('.tooltip').tooltip({
content: function () {
var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
return tooltipContent;
},
});
We'll parse the incoming string's attribute for unpleasant things, then convert it back to jQuery-readable HTML. The beauty of this is that by the time it hits the parser the strings are already concatenates, so it doesn't matter if someone is trying to split the script tag into separate strings. If you're stuck using jQuery's tooltips, this appears to be a solid solution.
我们将解析传入字符串的属性以查找令人不快的内容，然后将其转换回 jQuery 可读的 HTML。这样做的好处在于，当它到达解析器时，字符串已经连接在一起，所以如果有人试图将脚本标记拆分为单独的字符串，这并不重要。如果您一直在使用 jQuery 的工具提示，这似乎是一个可靠的解决方案。
