Javascript 如何使用默认按钮关闭tippyjs的工具提示

我想为每一个

工具提示都设置一个关闭按钮，我怎么能设置它呢

注意：我不想把设计搞砸，这就是为什么我在这里没有尝试太多最好的解决方案

下面是演示：


tippy（'t1，'t2，'t3，'t4'{
内容：“错误消息”，
延误：100，
阿罗：没错，
箭头类型：“圆形”，
尺寸：'大'，
持续时间：500，
动画：“缩放”，
触发器：'手动'，
位置：'底部'，
hideOnClick:false，
});
变量设置=[{id:#t1”，位置：“顶部”}，{id:#t2”，位置：“底部”}，
{id:#t3，pos:#左}，{id:#t4，pos:#右}]；
设置。forEach（函数（sett）{
var tip=document.querySelector（sett.id）；
蒂皮；
提示。_tippy.set（{内容：“单击x”，位置：sett.pos}）；
提示。_tippy.show（）；
});
div.tippy-dummy{
位置：相对位置；
宽度：220px；
高度：30px；
背景：#333；
颜色：#fff；
}
第二节倒立假人跨距{
位置：绝对位置；
显示：内联块；
背景：#715a5a；
右：0；
排名：0；
}
.工具提示{
显示器：flex；
证明内容：之间的空间；
宽度：90%；
}
.btn{
宽度：90px；
高度：30px；
边框：2个实心#ccc；
边界半径：6px；
}
.btn:悬停{
光标：指针；
背景#f05a27；
}    
.工具提示{
边缘顶部：80px；
}

预期产出：
请单击X以隐藏
X

顶部
底部
左边
赖特
您要查找的操作是
.hide（）

要使用此操作，您必须对代码进行一些调整：

将
交互：true
添加到tippy设置
分配
.hide（）对
设置中的
popper
属性执行操作。forEach
函数：

~

PROTIP：
如果要在单击popper中的特定元素时隐藏popper（
X
，例如），只需再添加一点标记即可：

将一些标记添加到所需元素
X

使用onclick中的元素：

更新的代码笔：
这实际上比吉福德N.的答案更简单


这是我的钮扣

const tippyInstance=tippy（“[data tippy content]”{
allowHTML:是的，
互动：没错，
onShow（实例）{
instance.popper.querySelector（'.closeme'）.addEventListener（'click'，（）=>{
instance.hide（）；
});
},
onHide（实例）{
instance.popper.querySelector（'.closeme'）.removeEventListener（'click'，（）=>{
instance.hide（）；
});
},
});

tippy('#t1,#t2,#t3,#t4',{
   ...
   interactive: true,
   ...
});`

settings.forEach(function(sett){
  ...
  tip._tippy.popper.onclick = function() {
    tip._tippy.hide();
  }
});

settings.forEach(function(sett){
  ...
var closeBtn = tip._tippy.popper.getElementsByClassName('hide')[0];
closeBtn.onclick = function() {
  tip._tippy.hide();
}