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

Question

今天,我使用jQuery 1.9.1升级了所有jQuery插件.我开始在jquery.ui.1.10.2中使用jQueryUI工具提示.一切都很好.但是当我在内容中使用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

来自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"
});