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

Question

我正在尝试做一些与问题 here 中提出的非常相似（如果不相同）的事情（答案对我不起作用，似乎 answerer/creator没看懂问题）。

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

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

我是这样做的：

    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>（指的是 tippy show() 函数）。但是当我删除其中一个（tippy 实例）时，另一个完美运行。

Answer 1

看起来 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); 
}

这是一个 fiddle 演示：https://jsfiddle.net/g6odqukr/

Answer 2

与此同时，我想到了在元素 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/

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

Multiple tippy.js instances on a single html element with different trigger options

javascript

tippyjs