Javascript 包含html内容的多个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>

正文
文本2
tippy（“.btn”{
内容：document.querySelector（“.myTemplate”）
})
const clone=document.querySelector（'.myTemplate'）.cloneNode（true）

tippy将选择器作为其主要参数，您需要不同的ID来完成此操作。如果在运行时生成了多个内容工具提示，我建议在设置

id

和使用for循环对其进行迭代时使用通用约定

考虑到这一点，有两个内容工具提示

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

正文
文本2
tippy（“.btn1”{
内容：document.querySelector（'.myTemplate1'）
})
tippy（'.btn2'{
内容：document.querySelector（'.myTemplate2'）
})

也许这有助于人们再次来到这里：

同时检查文档：

document.querySelectorAll（'按钮[数据模板]）.forEach（btn=>{
蒂皮（btn{
内容（参考）{
const id=reference.getAttribute（'data-template'）；
const template=document.getElementById（id）；
返回template.innerHTML；
},
allowHTML：是的
})
})

一个
两个
三
一个的内容
两个的内容
三人组的内容

谢谢您的回答，但实际上可能有未知数量的工具提示-从零到几十个，我写了2个作为示例。似乎tippy.js无法满足我的需求。附近有类似的工具吗？