Estoy tratando de abrir una información sobre herramientas tippy cuando se hace clic en un botón, no agregar la información sobre herramientas a este botón, sino abrirla en su propio lugar.

En mi ejemplo, tengo un botón Agregar al carrito y un ícono de carrito de compras en mi menú que muestra el carrito de compras dentro de una información sobre herramientas. Quiero que esta información sobre herramientas también se muestre al hacer clic en el botón Agregar al carrito.

Intenté crear una instancia de mi tippy y usar esto con el método show() pero no tuve suerte.

Entonces, como un ejemplo simple: hay elemento1 y elemento2. Element1 tiene el código tippy que funciona bien, pero ahora también quiero activar el tippy en element1 al hacer clic en element2.

Mi código:

 const tippyinstance = tippy('.carttip', { theme: 'blue', trigger: 'click', allowHTML: true, animation: 'scale-subtle', maxWidth: 400, boundary: 'viewport', interactive: true, content: function (reference) { return reference.querySelector('.tooltipcontent'); }, onShow(instance) { refreshcart(true, instance); } });

Mi código de añadir al carrito:

 $('body').on('click', ".addtocart", function (e, tippyinstance) { e.preventDefault(); var form_data = $(".addtocartform").serialize(); $.ajax({ type:'post', url:"includes/addtocart.php", data: { form_data: form_data }, success:function(data){ tippyinstance.show(); }, }); });

También tengo esta función para actualizar siempre el contenido de la información sobre herramientas para que se muestre la información más reciente:

 function refreshcart(force, tippyInstance) { $.ajax({ type: 'post', url: 'includes/refreshcart.php', data: ({}), success: function(data){ $('body #headercart').empty().append(data); tippyInstance.popperInstance.update(); } }); }

Intenté pasar tippyinstance a mi función de agregar al carrito, pero sigo recibiendo este error:

 Uncaught TypeError: Cannot read properties of undefined (reading 'show')

Show es un método correcto si observa los documentos: https://atomiks.github.io/tippyjs/v6/methods/ Por lo tanto, probablemente no pueda encontrar mi instancia tippy. ¿Porqué es eso?

Abrir la información sobre herramientas regularmente funciona bien (haciendo clic en el ícono del carrito de compras), pero no al hacer clic en el botón Agregar al carrito.

Registro console.log({tippyinstance}) dentro de mi función de clic:

 {tippyinstance: Array(1)} tippyinstance: Array(1) 0: {id: 1, reference: div.carttip.module-icon.module-icon-cart, popper: div#tippy-1, popperInstance: null, props: {…}, …} length: 1 [[Prototype]]: Array(0) [[Prototype]]: Object