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

时间:2013-03-31 20:20:17

标签: jquery html jquery-ui jquery-ui-tooltip

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

这是我的工具提示的截图:

enter image description here

如何在1.10.2中使用jQueryUI工具提示使HTML内容有效?

15 个答案:

答案 0 :(得分:174)

修改:由于这是一个受欢迎的答案,我在下面的评论中添加了@crush中提到的免责声明。如果您使用此工作,be aware that you're opening yourself up for an XSS vulnerability。只有在知道您正在做什么并且某些属性中的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/

答案 1 :(得分:16)

而不是:

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

使用它来获得更好的性能

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

答案 2 :(得分:13)

我用自定义数据标记解决了它,因为无论如何都需要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,工具提示只显示有用的标签。

答案 3 :(得分: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>

第一个范围用于显示的文本,隐藏文本的第二个范围,当您将鼠标悬停在其上时显示。

答案 4 :(得分:2)

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

在title属性中:

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

内容功能

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

答案 5 :(得分:2)

要扩展@Andrew Whitaker上面的答案,您可以将工具提示转换为title标签中的html实体,以避免将原始html直接放入您的属性中:

&#13;
&#13;
15
&#13;
$('div').tooltip({
    content: function () {
        return $(this).prop('title');
    }
});
&#13;
&#13;
&#13;

通常情况下,工具提示存储在php变量中,因此您只需要:

<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>

答案 6 :(得分:1)

$(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/

答案 7 :(得分:1)

只要我们使用jQuery(&gt; v1.8),我们就可以用$ .parseHTML()解析传入的字符串。

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

我们将解析传入字符串的属性以获取不愉快的事情,然后将其转换回jQuery可读的HTML。这样做的好处是,当它到达解析器时,字符串已经连接,所以如果有人试图将脚本标记拆分为单独的字符串并不重要。如果你坚持使用jQuery的工具提示,这似乎是一个可靠的解决方案。

答案 8 :(得分:1)

来自http://bugs.jqueryui.com/ticket/9019

  

将HTML放在title属性中是无效的HTML而我们是   现在逃避它以防止XSS漏洞(见#8861)。

     

如果您的工具提示中需要HTML,请使用内容选项 -   http://api.jqueryui.com/tooltip/#option-content

尝试使用javascript设置html工具提示,请参阅下面的

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

答案 9 :(得分:1)

您可以修改源代码&#39; jquery-ui.js&#39; ,找到这个默认函数来检索目标元素的标题属性内容。

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 =&#39; false&#39;在你的目标html元素; 像这样 <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

答案 10 :(得分:1)

另一个解决方案是获取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);
      }
    }
  });
});

示例: http://jsfiddle.net/hamzeen/0qwxfgjo/

答案 11 :(得分:0)

HTML标记

类别为“ .why”的工具提示控件,类别为“ .customTolltip”的工具提示内容区域

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

答案 12 :(得分:0)

以上所有解决方案都不适合我。这对我有用:

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

答案 13 :(得分:0)

替换\n或转义的<br/>可以解决问题,同时保留其余HTML的转义:

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

答案 14 :(得分:-1)

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

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

<强>更新
它与jQuery ui tooltip属性无关 - 它在bootstrap ui工具提示中是真的 - 我的坏!