为什么 jQuery Tooltip 不显示 html 内容？答案

【问题标题】：Why jQuery Tooltip does not show html content?为什么 jQuery Tooltip 不显示 html 内容？
【发布时间】：2013-04-02 13:29:01
【问题描述】：

我在 html 页面上创建了一个 jQuery Tooltip。我想在超链接上显示带有 html 内容的工具提示。但是 jQuery 工具提示只是将所有 html 文本显示为工具提示内的普通文本，但没有 html 格式。有一个jQuery Tooltip的例子。

<head>
    <title>jQuery Tooltip</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

    <script>
        $(function() {
            $(document).tooltip();
        });
    </script>
    <style>
        label {
            display: inline-block;
            width: 5em;
        }
    </style>
</head>
<body>
    <a href="#" title="<font color='#FF0000'>That's what this widgets</font>">Tooltips</a>
</body>

工具提示不是以红色显示文本“这就是这个小部件”，而是显示“<font color='#FF0000'>That's what this widgets</font>”。 html 格式不适用于工具提示文本。工具提示似乎无法识别 html 格式。问题似乎是工具提示上的样式不正确，或者可能是 jQuery 工具提示不支持 html 内容。

我想知道为什么我的 jQuery 工具提示不能显示 html 内容？我需要一些帮助来解决我的问题。

【问题讨论】：

<a> 标签未关闭
这不是设置工具提示样式的正确方法。最好检查Tooltip API。滚动到 tooltipClassType 。

标签： jquery html stylesheet

【解决方案1】：

使用tooltip提供的content选项

$(function(){
  $('[title]').tooltip({
    content: function(){
      var element = $( this );
      return element.attr('title')
    }
  });
});

演示：Plunker

【讨论】：

我从 Plunker 复制了你所有的文本，但它不适用于我的网络浏览器。我不知道为什么，我看你的例子很好，但它不适用于我的网络浏览器。
好的！我将您的所有示例下载为 zip 文件并直接运行。所以一切都是正确的。非常感谢您的帮助。

【解决方案2】：

最好用css设置颜色：

Javascript 代码：

$(function () {
    $(document).tooltip({ tooltipClass: "custom-tooltip-styling" });
});

CSS：

.custom-tooltip-styling { color: #ff0000; }

演示： http://jsfiddle.net/netme/3Ckk3/2/

【讨论】：