1

我正在尝试做一些与这里的问题非常相似（如果不一样的话）的事情（答案对我不起作用，似乎回答者/创建者不理解这个问题）。

我的目标是在具有不同触发选项的单个 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 实例）时，另一个可以完美运行。

4

2 回答 2

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); 
}

这是一个演示这个的小提琴：https ://jsfiddle.net/g6odqukr/

于 2019-08-27T12:12:10.817 回答
0

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

于 2019-08-29T09:45:15.303 回答