CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap-3tooltippopover
Josh L
Josh L

Reputation: 1492

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

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/

Upvotes: 3

Views: 9251

Answers (1)

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

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>

Upvotes: 1

Related Questions