jquery UI工具提示不支持html内容 [英] Jquery UI tooltip does not support html content

问题描述

今天，我用jQuery 1.9.1升级了我所有的jQuery插件。我开始使用jQueryUI tooltip和jquery.ui.1.10.2。一切都很好。但是当我在内容中使用HTML标签时（我在应用工具提示的元素的标题属性中），我注意到HTML不受支持。

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

解决方案

编辑：因为这是一个受欢迎的答案，我添加了 @crush 在下面的评论中提到。如果您使用此解决方法，请 注意您打开自己的XSS漏洞 。只有在 知道您在做什么的情况下才能使用此解决方案，并且可以 。

---

最简单的方法是给 content 选项提供一个覆盖默认行为的函数：

  $（function（）{
 $（document）.tooltip（{
 content：function（） {
 return $（this）.prop（'title'）; 
} 
}）; 
}）; 
  

示例： http://jsfiddle.net/Aa5nK/12/

另一个选项是覆盖您自己的工具提示小部件会更改内容选项：

  $。 widget（ui.tooltip，$ .ui.tooltip，{
 options：{
 content：function（）{
 return $（this）.prop（'title'）; 
} 
} 
}）; 
  

现在，每次调用 .tooltip ，HTML内容将被返回。

示例： http://jsfiddle.net/Aa5nK/14/

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 title attribute of the element I was applying the tooltip to), I noticed that HTML is not supported.

This is screenshot of my tooltip:

How can I make HTML content work with jQueryUI tooltip in 1.10.2?

解决方案

Edit: Since this turned out to be a popular answer, I'm adding the disclaimer that @crush mentioned 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 doing and can be certain of the HTML content in the attribute.

---

The easiest way to do this is to supply a function to the content option that overrides the default behavior:

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

Example: http://jsfiddle.net/Aa5nK/12/

Another option would be to override the tooltip widget with your own that changes the content option:

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

Now, every time you call .tooltip, HTML content will be returned.

Example: http://jsfiddle.net/Aa5nK/14/

这篇关于jquery UI工具提示不支持html内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！