jQuery UI的工具提示不支持HTML内容(Jquery UI tooltip does not

今天，我升级我所有的jQuery的插头，在使用jQuery 1.9.1。 我开始使用jQueryUI的提示与jquery.ui.1.10.2。 一切都很好。 但是，当我在使用内容的HTML标记（在title元素的属性，我申请的工具提示），我注意到，HTML是不支持的。

这是我的提示的截图：

我怎样才能使1.10.2与jQueryUI的提示HTML内容的工作？

Answer 1:

编辑 ：既然这竟然是一个受欢迎的答案，我添加了免责声明@crush在下面的评论中提及。 如果使用此解决， 要知道，你打开自己制造的XSS漏洞 。 只有当你知道自己在做什么 ，可以肯定在属性中的HTML内容使用此解决方案。

---

要做到这一点最简单的方法是提供一个功能的content覆盖默认行为的选项：

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

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

另一种选择是重写用自己的工具提示部件，改变的content选项：

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

现在，每次通话时间.tooltip ，HTML内容将被退回。

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

Answer 2:

取而代之的是：

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

使用此获得更好的性能

$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});

Answer 3:

我有一个自定义的数据标签解决它，因为一个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整合和工具提示只显示了想要的标签。

Answer 4:

您也可以完全用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&nbsp;</b> a tooltip<br/> <b>This is&nbsp;</b> another tooltip<br/> </span> </a> <br/>Move the mousepointer to the tooltip headline above. </div> 

第一跨度是显示文本，为隐藏文字，当你将鼠标悬停在这其中显示了第二个跨度。

Answer 5:

为了避免将HTML标签的title属性，另一种解决方案是使用降价。 例如，你可以使用[BR]来表示一个换行符，然后执行一个简单的内容替换功能。

在title属性：

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

在您的内容功能 ：

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

Answer 6:

要在@Andrew惠特克的回答上面的扩展，你可以在标题标签中的提示转换为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="&lt;div&gt;check out these kool &lt;i&gt;italics&lt;/i&gt; and this &lt;span style=&quot;color:red&quot;&gt;red text&lt;/span&gt;&lt;/div&gt;">Hover Here</div> 

通常情况下，工具提示存储在一个PHP变量反正所以你只需要：

<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>

Answer 7:

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

感谢岗位和解决方案上面。

我已经更新了代码点点。 希望这可以帮助你。

http://jsfiddle.net/pragneshkaria/Qv6L2/49/

Answer 8:

只要我们使用jQuery（> V1.8），我们可以分析输入的字符串以$ .parseHTML（）。

$('.tooltip').tooltip({
    content: function () {
        var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
        return tooltipContent;
    },
}); 

我们将解析输入字符串的属性为不愉快的事情，然后将其转换回jQuery的可读HTML。 这样做的好处是，到时候它击中分析器琴弦已经会连接，所以如果有人试图script标签分割成单独的字符串也无所谓。 如果你使用jQuery的工具提示卡，这似乎是一个固溶体。

Answer 9:

从http://bugs.jqueryui.com/ticket/9019

标题属性中把HTML是无效的HTML，现在我们正在逃逸，以防止XSS漏洞（见＃8861 ）。

如果您在提示需要使用的HTML内容选项- http://api.jqueryui.com/tooltip/#option-content 。

尝试使用JavaScript来设置HTML工具提示，见下文

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

Answer 10:

您可以修改源代码“jQuery的ui.js”，找到获取目标元素的title属性内容此默认功能。

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

因此，只要你想显示HTML技巧，只需要加一个属性ignoreHtml =“假”，你的目标HTML元素; 这样<td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

Answer 11:

另一个解决方法是将抓住文本内部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);
      }
    }
  });
});

例如： http://jsfiddle.net/hamzeen/0qwxfgjo/

Answer 12:

HTML标记

工具提示控制与类“为什么”，并与类工具提示内容区域“.customTolltip”

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

Answer 13:

添加HTML = true添加到工具提示选项

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

更新
这是不相关的jQuery UI的tooltip属性-它在引导用户界面提示真的-我的厉害！

文章来源: Jquery UI tooltip does not support html content