为什么jQuery工具提示不显示HTML内容？

Question

为什么jQuery工具提示不显示HTML内容？

3

我在html页面上创建了一个jQuery提示框。我想在超链接上显示一个带有html内容的提示框。但是jQuery提示框只会将所有html文本作为普通文本显示在提示框中，而不具有html格式。这里有一个jQuery提示框的示例。

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

当鼠标悬停在小部件上时，提示框不显示红色文字"That's what this widgets"，而是显示"<font color='#FF0000'>That's what this widgets</font>"。提示框文本不适用HTML格式。似乎提示框无法识别HTML格式。问题可能是提示框的样式不正确或jQuery提示框不支持HTML内容。

我想知道为什么我的jQuery提示框无法显示HTML内容？我需要帮助解决这个问题。

- Tri Nguyen Dung

<a>标签没有关闭。 - Mikhail Chernykh

那不是样式提示框的正确方式。最好查看Tooltip API。滚动到tooltipClassType。 - tiagojpdias

2个回答

1

最好使用CSS来设置颜色：

Javascript代码：

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

CSS：

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

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

- Mikhail Chernykh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arun P Johny · Accepted Answer

使用tooltip提供的内容(content)选项。

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

示例: Plunker