在Tippy中,我想在工具提示中显示标签。为了这,
我试过了:
<i style="font-size:20px;" class="fa fa-info tippy" data-tippy-content="You do not need to add <style>....</style> 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中创建此图像):
编辑:但他们两个都显示如下:
您可以将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 <style>....</style> 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>
如果您在转义的字符之间留出空格,它似乎会显示您的预期结果。
<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 < style >....< /style > tags.">Text</button>
<script>
tippy('button')
</script>