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

86

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

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

在此处输入图片说明

如何使用1.10.2中的jQueryUI工具提示使HTML内容起作用？

jquery  html  jquery-ui  jquery-ui-tooltip 
— 安德鲁·惠特克
source
1
自您升级以来，这是刚刚损坏的东西吗？对于我来说，在jQuery 1.9.1，jQuery UI 1.9.2中似乎工作正常jsfiddle.net/2n3DL/1
— 2013年
嗯，这是个好主意。我可以再问一个问题吗？好的，我有一个工具提示图标，它有一个名为“ tooltip”的类，如下所示：<img src =“ images / info.png” class =“ tooltip” title =“一些<b>很棒</ b> HTML工具提示文字！“>如何使用这种方式？最好的祝福。
看到更新拨弄jQuery UI的1.10.2 metadepts这里和jQuery 1.9.1。它仍然有效。
— SachinGutte
@phobos：不，不是。<b></b>工具提示中有标签。
— Andrew Whitaker
1
将鼠标悬停在“某些输入”上（直接返回HTML内容的工具提示可以正常工作）。我知道OP的问题尚不清楚，但是我假设他（或她）在title属性中使用HTML ，而从1.10版本开始，该属性不受支持。
— Andrew Whitaker

Answers:

186

编辑：由于这是一个受欢迎的答案，因此我添加了@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/

— 安德鲁·惠特克
source
4
唯一的问题是它绕开了jQuery开始在title属性中转义HTML的原因。
— 暗恋
4
@eidylon Putting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities。在安德鲁的答案中，标题仍必须包含HTML，这是无效的。
— 2013年
您可以在title属性中包含内容的文本部分，然后在内容回调中构建HTML的周围部分以解决此问题（只要您知道初始化时的内容）
— jinglesthula，2014年
18

代替这个：

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

用它来获得更好的性能

$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});
— Profesor08
source
是的，性能更好，因为我只有一些工具提示元素
— daddinhquoc 18/09/29
完美工作
— Helpha
14

我用自定义数据标签解决了它，因为无论如何都需要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规范，并且仅针对需要的标签显示工具提示。

— 克里斯
source
5

您也可以使用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>
展开摘要

第一个跨度用于显示的文本，第二个跨度用于隐藏的文本，当您将鼠标悬停在其上时会显示。

— 马特
source
3

为了扩展上述@Andrew Whitaker的答案，您可以将工具提示转换为title标签内的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>
— 比利诺亚
source
2

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

在标题属性中：

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

在您的内容功能中：

content: function () {
    return $(this).attr('title').replace(/\[br\]/g,"<br />");
}
— Flareman2020
source
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/

— Pragnesh Karia
source
1

只要我们使用jQuery（> v1.8），就可以使用$ .parseHTML（）解析传入的字符串。

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

我们将分析传入字符串的属性以解决不愉快的事情，然后将其转换回jQuery可读的HTML。这样做的好处是，当它到达解析器时，字符串已经连接在一起，因此，如果有人尝试将script标记拆分为单独的字符串，则没有关系。如果您对使用jQuery的工具提示感到困惑，那么这似乎是一个可靠的解决方案。

— 贫民窟
source
1

您可以修改源代码'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提示时，只需在目标html元素上添加一个属性ignoreHtml ='false'即可；像这样 <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

— 小丑
source
1

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

— Hamzeen Hameem
source
1

上面的解决方案都不适合我。这对我有用：

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

HTML标记

类“ .why”的工具提示控件，类“ .customTolltip”的工具提示内容区

$(function () {
                $('.why').attr('title', function () {
                    return $(this).next('.customTolltip').remove().html();
                });
                $(document).tooltip();
            });
— 超级模特
source
0

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

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

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

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

更新
它与jQuery ui工具提示属性无关-在bootstrap ui工具提示中确实如此-不好！

— 用户名
source
1
抱歉，这对我不起作用。官方文档中也没有提及“ html”选项。
— Wireblue
1
这是针对Bootstrap 2.3工具提示而非jquery-ui工具提示的
— MaciejPyszyński2014年
工具提示没有
— 属性
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.