当单击元素中的元素时，如何隐藏TippyJS？

Question

当一个元素被点击时，我不得不隐藏我的提示(元素是作为链接的小图像)，但是我还没有找到任何有用的脚本与我的提示一起工作。

我试过这些都没有运气：

如何在鼠标中心显示工具提示并使用Tippy.js单击隐藏

https://github.com/atomiks/tippyjs/issues/437

有人能帮忙吗？-)

这里是我的TippyJS :

​

tippy('#ReactionBar' + val, {
  a11y: true,
  role: 'tooltip',
  allowHTML: true,
  animation: 'perspective-extreme',
  appendTo: () => document.body,
  arrow: true,
  arrowType: 'sharp',
  boundary: 'HTMLElement',
  content: ReactionBarContent.get(0).outerHTML,
  delay: 0,
  offset: [0, 5],
  duration: [325, 275],
  hideOnClick: true,
  ignoreAttributes: false,
  inertia: false,
  interactive: true,
  interactiveBorder: 2,
  interactiveDebounce: 0,
  placement: 'top-end',
  popperOptions: {},
  showOnCreate: false,
  size: 'regular',
  target: '',
  theme: 'light',
  touch: true,
  trigger: 'mouseenter focus',
  triggerTarget: null,
  moveTransition: 'transform 0.2s ease-out',
});

​

Answer 1

我也面临着同样的问题，我发现使用onShown支柱和instance.hide()方法是有效的。我发现这不需要hideOnClick道具。

this.tippy = tippy(this.element, {
  // your other props
  interactive: true,
  trigger: 'click',
  triggerTarget: this.triggerTarget,
  onShown(instance) {
    document.querySelector('[data-tippy-root]').addEventListener('click', event => {
      instance.hide();
    })
  }
})