0

Tippy中,我想在工具提示中显示标签。为了这,

我试过了:

<i style="font-size:20px;" class="fa fa-info tippy" data-tippy-content="You do not need to add &lt;style&gt;....&lt;/style&gt; tags."></i>

或者

<i style="font-size:20px;" class="fa fa-info tippy" data-tippy-content="You do not need to add <style>...</style> tags."></i>

但是它们都没有正确显示工具提示的内容。我想要这样(这张图片是在 Photoshop 中创建的):

在此处输入图像描述

编辑:但他们两个都这样显示:

在此处输入图像描述

4

2 回答 2

2

您可以将allowHTML: false选项添加到您的.tippy类以使您的 HTML 呈现为文本,而不是实际呈现标记:

tippy(".fa-info.allowHTML")

tippy(".fa-info", {
  allowHTML: false
})
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<i style="font-size:20px;" class="fa fa-info tippy " data-tippy-content="You do not need to add &lt;style&gt;....&lt;/style&gt; tags."></i>
<br />
<br />
<i style="font-size:20px;" class="fa fa-info tippy allowHTML" data-tippy-content=" Click <b>Send</b> button for sending..."></i>

于 2019-03-04T06:48:55.013 回答
1

如果您在转义字符之间留一个空格,它似乎显示了您的预期结果。

<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<button data-tippy-content="You do not need to add &lt; style &gt;....&lt; /style &gt; tags.">Text</button>
<script>
  tippy('button')
</script>

于 2019-03-04T06:54:57.283 回答