Show one tooltip on hover + and another different tooltip on click (interactive)

guivr commented 3 years ago

Hi! How can I show a normal tooltip on hover (explaining what clicking would do) then show a different tooltip (dropdown, HTML content, etc) when triggered by a click? Is it possible?

atomiks commented 3 years ago

You can add separate tippy instances to the same element yes

guivr commented 3 years ago

Hi, @atomiks! Thank you so much for your attention.

I've tried that... If I use:

<div data-tippy-content="Click to copy" data-copy-tippy><!-- ICON HERE etc etc !--></div>

then

tippy.delegate('body', {
  target: '[data-tippy-content]',
  followCursor: true,
  plugins: tippy.followCursor,
  arrow: false
});

and

tippy.delegate('body', {
  target: '[data-copy-tippy]',
  interactive: true,
  content: copyDropdown.outerHTML,
  allowHTML: true,
  appendTo: document.body,
  trigger: 'click'
});

only the first tooltip is enabled.

How can I fix this? Am I doing it wrong?

atomiks commented 3 years ago

I believe delegates only work for 1 instance

guivr commented 3 years ago

:( Ok. Thanks for the information!

atomiks / tippyjs

Show one tooltip on hover + and another different tooltip on click (interactive) #857