单个 html 元素上的多个 tippy.js 实例具有不同的触发器选项

Question

我正在尝试做一些与这里问题中提出的内容非常相似(如果不是相同的话)的事情(答案对我不起作用，似乎答案者/创建者不理解这个问题)。

我的目标是在具有不同触发器选项的单个 html 元素上有两个提示工具提示实例：

• 一个将在mouseenter事件上触发(默认的，使用默认的 tippy 构造函数创建，根本不使用触发选项)，以及
• 一个将在click事件上触发(使用触发选项manual并在之后调用 tippyshow()函数)。

我是这样做的：

var myelement = document.getElementById('myelementid');
// Default way of creating tippy tooltips
tippy(myelement, {
content: 'Shown on hover.'
});
// Creating a tooltip which will be triggered manually/programmatically
var mytippy = tippy(myelement, {
content: 'Shown on click.',
trigger: 'manual'
});
myelement.addEventListener("click", function() {
mytippy.show(300);
setTimeout(function(){ mytippy.hide(300); }, 1500);
});

由于某种原因，它根本不会在该元素上显示手动触发的工具提示。我得到这个例外：Uncaught TypeError: Cannot read property 'show' of undefined at HTMLImageElement.<anonymous>(指tippyshow()函数)。但是当我删除其中一个(tippy实例)时，另一个可以完美运行。

看起来像 Tippy.js在工具提示的元素上使用 HTML 属性(即title或data-tippy)。由于重复属性将是无效标记，因此解决方法可能是在单击元素时更改工具提示文本。然后，在用户离开元素后，您可以将工具提示文本更改回来。

例如：

let myelement = document.getElementById('myelementid');
let to;
let text = "Show on hover."
let tip = tippy(myelement, {
content: text
});
myelement.addEventListener("click", handleClick);
myelement.addEventListener("mouseout", moveOut);
function moveOut () {
// when the user moves their mouse away from the button
// cancel showing the alternate tooltip text
clearTimeout(to);
// slight delay to prevent "flash" of original tooltip text
setTimeout(function () {
// set the tooltip text back to the original
tip.setContent(text);
}, 200);
}
function handleClick () {
tip.setContent("Click");
tip.show(300);
to = setTimeout(function() {
tip.hide(300);
}, 1500); 
}

这里有一个小提琴来证明这一点：https://jsfiddle.net/g6odqukr/

与此同时，我想到了一个想法，将一个提示放在元素本身myelement，另一个放在它的parentNode元素上，目前它似乎是最简单的解决方案(理解和编写)。这很简单，就像编写两个完全不同的工具提示一样。它要求parentNode元素的大小与myelement本身相同，以便看起来工具提示实际上属于同一元素。

这里的代码：

var myelement = document.getElementById('myelementid');
// Default way of creating tippy tooltips
tippy(myelement, {
content: 'Shown on hover.'
});
// Creating a tooltip which will be triggered on click
tippy(myelement.parentNode, {
content: 'Shown on click.',
trigger: 'click'
});

这里有更高级的版本：https://jsfiddle.net/zbhf48gn/