多个带有HTML内容的tippy.js工具提示

Question

我正在尝试使用tippy.js在同一页面上获得多个带有不同HTML内容的工具提示。这些内容是各不相同的，可能仅是图像或使用HTML标记格式化的文本，也可能是文本+图像。如何使其正常工作？

我尝试运行此代码，但没有太大的成功。

 <a class="btn" href="#">Text</a>
<div class="myTemplate">
  <b>Text</b> <img src="https://i.imgur.com/dLcYjue.png">
</div>
 <a class="btn" href="#">Text2</a>
    <div class="myTemplate">
      <b>Text2</b>
    </div>


<script type="text/javascript">
    tippy('.btn', {
  content: document.querySelector('.myTemplate')
})
    const clone = document.querySelector('.myTemplate').cloneNode(true)
</script>

- n000000b

Answer 1

也许这可以帮助有需要的人再次到达此处：

还要检查文档： https://atomiks.github.io/tippyjs/v6/html-content/

document.querySelectorAll('button[data-template]').forEach(btn => {
    tippy(btn, {
        content(reference) {
            const id = reference.getAttribute('data-template');
            const template = document.getElementById(id);
            return template.innerHTML;
        },
        allowHTML: true
    })
})

<script src="https://unpkg.com/@popperjs/core@2.0.6/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6.0.0/dist/tippy-bundle.umd.min.js"></script>

<button data-template="one">One</button>
<button data-template="two">Two</button>
<button data-template="three">Three</button>

<div style="display: none;">
  <div id="one">
    <strong>Content for `one`</strong>
  </div>
  <div id="two">
    <strong>Content for `two`</strong>
  </div>
  <div id="three">
    <strong>Content for `three`</strong>
  </div>
</div>

- user1895720

Answer 2

tippy以选择器作为其主要参数，您需要不同的id来实现此目的。如果有超过几个内容提示工具/在运行时生成的提示工具，则建议使用通用约定设置id并使用for循环进行迭代。

考虑到有2个内容提示工具，

<a class="btn1" href="#">Text</a>
<div class="myTemplate1">
    <b>Text</b> <img src="https://i.imgur.com/dLcYjue.png">
</div>
<a class="btn2" href="#">Text2</a>
<div class="myTemplate2">
    <b>Text2</b>
</div>


<script type="text/javascript">
    tippy('.btn1', {
        content: document.querySelector('.myTemplate1')
    })
    tippy('.btn2', {
        content: document.querySelector('.myTemplate2')
    })
</script>

- theAnubhav

---

谢谢您的回答，但实际上可能会有未知数量的工具提示——从零到几十个，我只是以2作为示例。似乎tippy.js无法满足我的需求。是否有类似的工具可用？ - n000000b