Question

我在网站上使用tippy.js作为工具提示，但是当我必须使用某个功能（在移动设备上）手动隐藏它们时，它就出现了。但是我无法使用内置函数hide()

隐藏它

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

这是显示hide（）函数的documentation。这是我问题的一小部分。

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

来自documentation：

通过调用方法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>

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

1 个答案: