Jquery UI工具提示不支持html内容

今天，我用jQuery1.9.1升级了所有jQuery插件。我开始在jquery.ui.1.10.2中使用jQueryUI工具提示。一切都很好。但是当我在内容中使用HTML标记时（在我应用工具提示的元素的

title

属性中），我注意到HTML不受支持

这是我的工具提示的屏幕截图：

---

如何使HTML内容与1.10.2中的jQueryUI工具提示一起工作？

编辑：由于这是一个流行的答案，我添加了下面评论中提到的免责声明。如果您使用此工作环境。只有当您知道自己在做什么并且可以确定属性中的HTML内容时，才使用此解决方案

---

最简单的方法是为

内容

选项提供一个覆盖默认行为的函数：

$(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

示例：

另一个选项是使用您自己的工具提示小部件覆盖工具提示小部件，以更改

内容

选项：

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

现在，每次调用

.tooltip

，都会返回HTML内容

示例：

$（函数（）{
$.widget（“ui.tooltip”，$.ui.tooltip{
选项：{
内容：功能（）{
返回$（this.prop（'title'）；
}
}
});
$（'[rel=tooltip]'）。工具提示({
职位：{
我的：“中底20”，
在“中心顶端”，
使用：功能（位置、反馈）{
$（this.css（position）；
$("")
.addClass（“箭头”）
.addClass（反馈.垂直）
.addClass（反馈.水平）
.附于（本）；
}
}
});
});

感谢以上的帖子和解决方案

我已经更新了一点代码。 希望这能对你有所帮助

---

将html=true添加到工具提示选项中

$({selector}).tooltip({html: true});

更新

---

这与jQuery ui工具提示属性无关-在引导ui工具提示中是真的-我的错

我用自定义数据标记解决了这个问题，因为无论如何都需要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");
    },
});

---

只要我们使用jQuery（>v1.8），就可以使用$.parseHTML（）解析传入字符串

$（'.tooltip'）。工具提示({
内容：功能（）{
var tooltipContent=$（''）.html（$.parseHTML（$（this.attr（'title'））；
返回tooltipContent；
},
}); 

我们将解析传入字符串的属性以查找不愉快的内容，然后将其转换回jQuery可读的HTML。这样做的好处是，当它到达解析器时，字符串已经连接起来，因此，如果有人试图将脚本标记拆分为单独的字符串，这并不重要。如果您无法使用jQuery的工具提示，这似乎是一个解决方案。

From

将HTML放在title属性中是无效的HTML，我们是 现在将其转义以防止XSS漏洞（请参阅）

如果工具提示中需要HTML，请使用内容选项-

尝试使用javascript设置html工具提示，请参见下文

$( ".selector" ).tooltip({
   content: "Here is your HTML"
});

---

为了避免在title属性中放置HTML标记，另一种解决方案是使用markdown。例如，您可以使用[br]表示换行符，然后在内容函数中执行简单的替换

在标题属性中：

"Sample Line 1[br][br]Sample Line 2"

在内容功能中：

content: function () {
    return $(this).attr('title').replace(/\[br\]/g,"<br />");
}

内容：函数（）{
返回$（this.attr（'title'）。替换（/\[br\]/g，“
”）；
}

要展开上面@Andrew Whitaker的回答，您可以将工具提示转换为标题标记中的html实体，以避免将原始html直接放入属性中：

$（'div'）。工具提示({
内容：功能（）{
返回$（this.prop（'title'）；
}
});

将鼠标悬停在此处
您可以修改源代码“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”{
版本：“1.11.4”，
选项：{
内容：函数（）{
//支持：IEdisplay content
另一种解决方案是抓取
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);
      }
    }
  });
});

$（函数（）{
$（文档）。工具提示({
职位：{
使用：功能（位置、反馈）{
$（this.css（position）；
var txt=$（this.text（）；
$（this.html（txt）；
$("")
.addClass（“箭头”）
.addClass（反馈.垂直）
.addClass（反馈.水平）
.附于（本）；
}
}
});
});

示例：
您也可以通过使用CSS样式在不使用jQueryUI的情况下完全实现这一点。请参见下面的代码片段：


div#工具提示_文本_容器{
最大宽度：25em；
高度：自动；
显示：内联；
位置：相对位置；
}
div#工具提示_文本_容器a{
文字装饰：无；
颜色：黑色；
游标：默认值；
字体大小：正常；
}
div#工具提示_文本_容器a span.tooltips{
可见性：隐藏；
不透明度：0；
过渡：可见性0s线性0.2s，不透明度0.2s线性；
位置：绝对位置；
左：10px；
顶部：18px；
宽度：30em；
边框：1px实心#404040；
填充物：0.2em 0.5em；
游标：默认值；
线高：140%；
字体大小：12px；
字体系列：“SegoeUI”；
-moz边界半径：3px；
-webkit边界半径：3px；
边界半径：3px；
-moz盒阴影：7px 7px 5px-5px#666；
-网络工具包盒阴影：7px 7px 5px-5px#666；
盒影：7px 7px 5px-5px#666；
背景：#E4E5F0重复-x；
}
div#Tooltip_Text_容器：将鼠标悬停在span.tooltips上{
visib
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();
    },

$(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);
      }
    }
  });
});

$(function () {
                $('.why').attr('title', function () {
                    return $(this).next('.customTolltip').remove().html();
                });
                $(document).tooltip();
            });

$(document).ready(function()
{
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]',
        html: true
     });
});

$(document).tooltip({
    content: function() {
        var title = $(this).attr("title") || "";
        return $("<a>").text(title).html().replace(/&lt;br *\/?&gt;/, "<br/>");
    },
});