Question

是否可以以及如何在工具提示中显示格式化的HTML内容？我在论坛中寻找类似的问题，但没有找到我需要的确切内容。我举了一个简单的例子来澄清我的问题：

<head>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
    </script>
</head>

<body>
    Example<sup class="tooltip" title="***">[1]</sup>
    <span id="ttp">This is a<b>custom bold text</b></span>
</body>

问题是id="ttp"的文字如何显示在“标题”中。非常感谢你的回答。

Answer 1

我不知道你想要它有多动态和你的html结构，但有一个提供内容的选项。

 <script type="text/javascript">
        $(document).ready(function() {
            $('.tooltip').tooltipster({
                content: $('#ttp').html()
            });
        });
    </script>

但如果你的结构是动态的，那么在[FunctionInit] [1]上你可以设置你想要的元素的内容。在这里，我找到id为ttp的sibling span并获取它的html并将其设置为内容。注意：这里需要setTimeout，因为在设置新内容之前应该初始化工具提示（异步模拟）。

 <script type="text/javascript">
  $(document).ready(function() {
   $('.tooltip').tooltipster({
        content: 'Empty title',
        contentAsHTML: true,
        functionInit: function(origin, content) {
            var newTip = $(this).siblings('#ttp').html();
            setTimeout(function(){ origin.tooltipster('content', newTip);},50);
        }
    });
});

[1]：

将html格式的文本放在工具提示中

1 个答案: