Clever Geek Handbook

How to show tooltip on center of mouse and hide it by clicking Tippy.js

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

This brings up a tooltip when you click on an element with .tippy

and stays open until you click.

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

This shows a tooltip when the mouseenter is on an element with .tippy

and hides when the mouse leaves the element .tippy

.

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

I need a combination of both. Show the tooltip in the center of the mouse, but leave it open until I click.

I prefer to ** not listen for click events and mouseenter events and show them manually and hide them when used { trigger: 'manual' }

Also, could you please explain the trigger variant {custom}

. 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 a trigger {custom}

for what I am looking for? How?

Thank you so much!

+4


source to share


1 answer


Since version 3 you can use the method set()

.



tippy('.tippy', {
  trigger: 'mouseenter',
  onShow(tip) {
    tip.set({ trigger: 'click' })
  },
  onHide(tip) {
    tip.set({ trigger: 'mouseenter' })
  }
})
0


source






More articles:


All Articles