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

问题描述

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

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:

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

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

推荐答案

编辑:由于这是一个受欢迎的答案，我添加了@crush 在下面的评论中提到.如果您使用此解决方法，请注意，您正在为XSS 漏洞.仅当您知道自己在做什么并且可以确定属性中的 HTML 内容时，才使用此解决方案.

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.

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

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');
          }
      });
  });

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

另一种选择是使用您自己的更改 content 选项的工具提示小部件覆盖:

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');
        }
    }
});

现在，每次调用 .tooltip 时，都会返回 HTML 内容.

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

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

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