Tippy.js - tippy.jsドキュメント関数を使用してツールチップを非表示にできない

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>

任意およびすべてのヘルプは感謝！ documentationから

Answer 1

：

はメソッドgetPopperElementを呼び出し、直接要素に渡すことによって、要素のポッパーの参照を探す：

あなたは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>