Tippyjs: When using "mouseenter click", then "hideAll" doesn't work correctly

[julmot]

Bug description

I want tippy to appear on click and disappear on click again. Also I want it to work on hover.

This works with the trigger mouseenter click without any customizations. Now, what I need additionally is to close all existing tippy instances that were shown on click when hovering another tippy. So, let's say you're showing a tippy instance by clicking on it, then hovering over another tippy instance. Then two instances will be shown at the same time. This is what I'd like to avoid.

Based on the amazin documentation I tried my luck with:

[...document.querySelectorAll('.test')].forEach(toggle => {
  tippy(toggle, {
    content: toggle.getAttribute('data-content'),
    trigger: 'mouseenter click',
    onShow: instance => {
      tippy.hideAll({
        exclude: instance
      })
    }
  })
});

While this works for the first time, it doesn't work for all others.

Reproduction

Example: https://jsfiddle.net/oxpqLz9u/

Steps:

1. Click on the first tooltip
2. Hover over the second tooltip
3. Click on the first tooltip again

=> After the hover of the second tooltip the first tooltip should be closed. This works. But then, when clicking on the first tooltip again instead of re-opening it, it closes it. Usually it should stay open for either another click or when another instance is hovered.

[atomiks]

In this case it looks like you need hideOnClick: false, or when it's true, the isVisibleFromClick/shouldScheduleClickHide variables need to be tweaked for this case. /cc @mattsbennett

[julmot]

Since it should toggle on click, I would not like to set hideOnClick: false. Would you mind to elaborate what you mean with this?

or when it's true, the isVisibleFromClick/shouldScheduleClickHide variables need to be tweaked for this case

[atomiks]

Would you mind to elaborate what you mean with this?

Yeah that wasn't clear, I was describing the internal code which you can't fix from the outside

[mattsbennett]

@atomiks I'll have a look ASAP

[atomiks]

I wasn't able to get a failing test working but manually testing it showed it was fixed with that commit^

[julmot]

I can't confirm it's working. My example and the steps to reproduce will still show the issue. Since this example is using @6.x.x version it automatically uses the patch version v6.2.5.

Example: https://jsfiddle.net/oxpqLz9u/
Steps:

1. Click on the first tooltip
2. Hover over the second tooltip
3. Click on the first tooltip again

=> After the hover of the second tooltip the first tooltip should be closed. This works. But then, when clicking on the first tooltip again instead of re-opening it, it closes it. Usually it should stay open for either another click or when another instance is hovered.

[atomiks]

@julmot it's not released yet

[julmot]

@atomiks When it'll be released?

fyi: I've just noticed that the behavior I want to have here is already the default on mobile (touch) devices it seems.

[atomiks]

I'm going to try to fix all the open issues today and make a release.

[julmot]

Works 🍾