I'm using tippy.js for tooltips on a website, but it es to a point when I have to hide them manually with a function (on mobile). However I'm unable to hide it using the built in function hide()

Am I doing something wrong or is the library bugged?

Here's the documentation showing the hide() function. And here's a snippet of my problem.

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=".css" rel="stylesheet" />
<script src=".js"></script>
<script src=".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>

I'm using tippy.js for tooltips on a website, but it es to a point when I have to hide them manually with a function (on mobile). However I'm unable to hide it using the built in function hide()

Am I doing something wrong or is the library bugged?

Here's the documentation showing the hide() function. And here's a snippet of my problem.

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./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>

Any and all help appreciated!

• javascript
• tooltip

1 Answer 1

From the documentation:

Find the element's popper reference by calling the method getPopperElement and passing in the element directly:

You need to pass your element to getPopperElement, not the popup.

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./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>