Tippyjs: Auto hide tooltip after being triggered with click.

[gdagen]

I've been banging my head trying to figure out this very simple feature.

Desired effect: After clicking a button a tooltip appears and then disappears automatically after x seconds without any input from user.

What I'm seeing: The tooltip displays when I click, but will stay up until I click again (anywhere on screen). I've tried the delay and duration options, but these only effect the time the tool tip effect is shown between clicks. I've tried onShown, but not sure how to autohide the tooltip.

My code:

<button class="share_btn" type="button" >Click here</button>
<script>
tippy('.share_btn', {
  placement: 'right', 
  arrow: true,
  animation: 'fade',
  trigger: 'click',
  content: 'ToolTip'
});
</script>

[atomiks]

tippy('.share_btn', {
  placement: 'right', 
  arrow: true,
  animation: 'fade',
  trigger: 'click',
  content: 'ToolTip',
  hideOnClick: false, // if you want
  onShow(instance) {
    setTimeout(() => {
      instance.hide();
    }, 3000);
  }
});

[elalemanyo]

Hi,
I add one new html attribute so I can set the hide time: <button data-tippy-autohide=500>I have my own content</button>

And my js looks something like this:

tippy(document.querySelectorAll('[data-action~=initTippy'), {
    onShown(instance) {
        let element = document.querySelectorAll('[data-action~=initTippy')[instance.id - 1];
        if (element.hasAttribute('data-tippy-autohide')) {
            let duration = parseInt(element.getAttribute('data-tippy-autohide'), 0);
            setTimeout(() => {
                instance.hide();
            }, duration);
        }
    }
});

Is maybe a better way to do this?

thanks