2017-04-13 187 views
0

我在網站上使用工具提示tippy.js,但它遇到了一個問題,那就是我必須手動使用某個函數(在移動設備上)隱藏它們, 。然而,我無法使用內置函數來隱藏它hide()Tippy.js - 無法使用tippy.js文檔函數隱藏工具提示

我做錯了什麼或者庫存在錯誤? ()功能的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>

任何和所有幫助表示讚賞!

回答

2

documentation

通過調用方法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>