Jquery UI工具提示不支持html内容
Jquery UI工具提示不支持html内容
提问于 2013-04-01 04:20:17
今天，我把我所有的jQuery插件升级到了jQuery 1.9.1。我开始在jquery.ui.1.10.2中使用jQueryUI工具提示。一切都很好。但是，当我在内容中使用HTML标记时(在我应用工具提示的元素的title属性中)，我注意到不支持HTML。
这是我的工具提示的截图：
在1.10.2中，如何使用jQueryUI工具提示使HTML内容工作？
回答 10
Stack Overflow用户
发布于 2014-05-20 12:13:54
而不是这样：
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});使用此选项可获得更好的性能
$(selector).tooltip({
content: function () {
return this.getAttribute("title");
},
});Stack Overflow用户
发布于 2014-04-14 00:08:33
我用一个定制的数据标签解决了这个问题，因为无论如何都需要一个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的，并且工具提示只为想要的标签而显示。
Stack Overflow用户
发布于 2017-02-24 20:00:51
您也可以通过使用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>
第一个跨度用于显示文本，第二个跨度用于隐藏文本，当您将鼠标悬停在隐藏文本上时，将显示隐藏文本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15734105
复制相关文章
相似问题