Tippy.js cannot get tooltip to programatically show using .show() function

Question

I've recently been trying to implement tooltips to display errors in long documents that contains a scroll bar. I had originally started with using bootstrap tooltips but ran into some limitations with z-index described here: Unable to get Bootstrap Tooltip to display above div when inside scroll pane

I've since tried switching over to tippy.js hoping to have better luck. I have not however been able to get the tooltips to show up programatically using the exact same example as the documentation:

const tip = tippy('#myButton')
const el = document.querySelector('#myButton')
const popper = tip.getPopperElement(el)
tip.show(popper)

Basically it still has the normal hover behavior. I've created a jsfiddle example of almost exactly how my current page is laidout and hoping to trigger the tooltip to show on page load, not on hover!

Here is the jsfiddle: https://jsfiddle.net/L3jv4a9w/1/

Answer 1

The issue is with the element selector you were using.

If you update your code to the following it works

const tip = tippy('.root2');
const el = document.querySelector('.root2')
const popper = tip.getPopperElement(el);
tip.show(popper);

See js fiddle here or example in action below.

const tip = tippy('.root2');
const el = document.querySelector('.root2')
const popper = tip.getPopperElement(el)
tip.show(popper)

<link href="https://unpkg.com/[email protected]/dist/tippy.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/tippy.js"></script>


<div class="root2" title="This is a tooltip"> <b>Tooltip</b>
</div>