Tippy.js -无法使用tippy.js文档函数隐藏工具提示

Question

我在网站上使用tippy.js作为工具提示，但到了一定程度时，我必须用一个函数(在移动上)手动隐藏它们。但是，我无法使用内置函数hide()隐藏它

我是做错什么了还是图书馆被窃听了？

下面是显示hide()函数的文档。这是我问题的一个片段。

​

var instance = new Tippy('button')

var i = 0;

$(document).on('keyup', function() {
  $('.clickcount').html(i);
  i++;

  var popper = instance.getPopperElement(document.querySelector('.tippy-popper'));
  instance.hide(popper)

})

button {
  margin: 20px;
}

<link href="https://atomiks.github.io/tippyjs/tippy/tippy.css" rel="stylesheet" />
<script src="https://atomiks.github.io/tippyjs/tippy/tippy.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button title="text">Button with Tippy</button>

<div class="clickcount">Focus the document, then hover the button and press any key to hide it.</div>

​

任何和所有的帮助感谢！

Answer 1

来自文档

通过调用getPopperElement方法并直接传入元素，查找元素的popper引用：

您需要将元素传递给getPopperElement，而不是弹出窗口。

​

var instance = new Tippy('button')

var i = 0;

$(document).on('keyup', function() {
  $('.clickcount').html(i);
  i++;

  var popper = instance.getPopperElement(document.querySelector('button'));
  instance.hide(popper)

})

button {
  margin: 20px;
}

<link href="https://atomiks.github.io/tippyjs/tippy/tippy.css" rel="stylesheet" />
<script src="https://atomiks.github.io/tippyjs/tippy/tippy.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button title="text">Button with Tippy</button>

<div class="clickcount">Focus the document, then hover the button and press any key to hide it.</div>

​