How to show tooltip on mouseenter and hide on click with Tippy.js

Question

I am using Tippy.js. I would like to show the tooltip on mouseenter, but hide it on click.

This triggers a tooltip when you click on an element with .tippy and stays open until you click away.

tippy('.tippy', { trigger: 'click' });

This shows a tooltip when you mouseenter on an element with .tippy and hides when the mouse leaves the .tippy element.

tippy('.tippy', { trigger: 'mouseenter' });

I want a combination of both. Show tooltip on mouseenter, but leave it open until I click away.

I prefer to **not listen to the click events and mouseenter events and manually show it and hide it while using { trigger: 'manual' }

In addition, could you please explain the {custom} trigger option. From the documentation:

{custom} refers to the fact that you can have any event listener, but it won't have the opposite "hide" event.

Can I use {custom} trigger for what I am looking for? How?

Thanks a lot!

Answer 1

Depending on the version, you can update the trigger using lifecycle hooks:

• v5: setProps() method
• v3-v4: set() method

Both work the same.

tippy('.tippy', {
  trigger: 'mouseenter',
  onShow(instance) {
    // v5
    instance.setProps({trigger: 'click'});
    // v3-v4
    // instance.set({trigger: 'click'});
  },
  onHide(instance) {
    // v5
    instance.setProps({trigger: 'mouseenter'});
    // v3-v4
    // instance.set({trigger: 'mouseenter'});
  }
});