Estoy usando tippyJS para mostrar una ventana emergente de texto al pasar el mouse, pero también quiero mostrar esta ventana emergente después de 5 segundos en la carga de la página, así que hice esto:
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);Pero después de 5 segundos me sale:
Uncaught TypeError: instance.show is not a functionMientras que mi tippyjs funciona bien.
Mi 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>¿Qué puedo hacer para abrir este tippy después de 5 segundos?
Actualicé mi pregunta porque no vi que la asignaras directamente a una HTMLCollection. Tippy debe vincularse a NodeList o al tipo Elemento, por lo que primero debemos obtener el elemento y asignarlo.
Este ejemplo debería funcionar:
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>