I am using tippyJS to show a text popup on hover but I also want to display this popup after 5 seconds on pageload so I did this:
const instance = tippy('.tooltippy', {
trigger: 'mouseenter',
allowHTML: true,
placement: 'left',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
setTimeout(function() {
instance.show();
}, 5000);
But after 5 seconds I get:
Uncaught TypeError: instance.show is not a function
While my tippyjs works fine.
My html:
<span class="whatsappicon tooltippy" title="Chat met ons!">
<span class="whaplabel tooltipcontent">Stel je vraag!</span>
<a href="url" target="_blank">
<img src="images/custom/whatsapp_online.png" alt="Open Whatsapp">
</a>
</span>
What can I do to open this tippy after 5 seconds?
Updated my question since I did not see you assigned it directly to an HTMLCollection. Tippy needs to be binded to NodeList or Element type, so we need to get the element first and assign it to it.
This example should work:
const tooltippy = document.getElementById('tooltippy')
const instance = tippy(tooltippy, {
trigger: 'mouseenter',
allowHTML: true,
placement: 'left',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
setTimeout(function() {
instance.show();
}, 5000);<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<span class="whatsappicon" id="tooltippy" title="Chat met ons!">
<span class="whaplabel tooltipcontent">Stel je vraag!</span>
<a href="url" target="_blank">
<img src="images/custom/whatsapp_online.png" alt="Open Whatsapp">
</a>
</span>