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

Question

I am trying to do something very similar (if not the same) to what's been asked in the question here (the answer didn't work for me, it seems like the answerer/creator didn't understand the question).

My goal is to have two tippy tooltip instances on a single html element with different trigger options:

• one which will be triggered on mouseenter event (the default one, created using default tippy constructor without using the trigger option at all), and
• one which will be triggered on click event (using trigger option manual and calling the tippy show() function afterwards).

This is how I did it:

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

And for some reason it won't show the manually triggered tooltip on that element at all. I get this exception: Uncaught TypeError: Cannot read property 'show' of undefined at HTMLImageElement.<anonymous> (refers to the tippy show() function). But when I delete one of them (tippy instances), the other one works perfectly.

Answer 1

It looks like Tippy.js uses an HTML attribute on elements for the tooltip (i.e., title or data-tippy). Since duplicate attributes would be invalid markup, a workaround might be to change the tooltip text when the element is clicked. Then, after the user moves away from the element, you could change the tooltip text back.

For example:

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

Here's a fiddle demonstrating this: https://jsfiddle.net/g6odqukr/