He intentado diferentes variaciones de cambiar el texto de información sobre herramientas de tippy dependiendo del estado marcado/desmarcado de una casilla de verificación, y lo más cerca que he estado de hacerlo funcionar es el siguiente script JS, desafortunadamente no estoy definido en el tippy, y estoy incapaz de averiguar lo que me estoy perdiendo.
¿Alguien puede ayudar?
tippy('#SendOnEmailSwitchTippy', { a11y: true, role: 'tooltip', allowHTML: true, animation: 'perspective-extreme', arrow: true, arrowType: 'sharp', boundary: 'scrollParent', content(reference) { const title = reference.getAttribute('title'); const checkbox = document.getElementById('UserPecificMessageAdviceEmail') checkbox.addEventListener('change', (event) => { if (event.currentTarget.checked) { document.getElementById("SendOnEmailSwitchTippy").title = "Deactivate"; console.log('checked'); reference.removeAttribute('title'); return title; } else { document.getElementById("SendOnEmailSwitchTippy").title = "Activate"; console.log('unchecked'); reference.removeAttribute('title'); return title; } }) }, delay: 0, offset: [0, 5], duration: [325, 275], hideOnClick: true, ignoreAttributes: false, inertia: false, interactive: false, interactiveBorder: 0, interactiveDebounce: 0, placement: 'top', popperOptions: {}, showOnCreate: false, size: 'regular', target: '', theme: 'light', touch: true, trigger: 'mouseenter focus', triggerTarget: null, moveTransition: 'transform 0.2s ease-out', }); <div class='form-check form-switch switch switch-info SendOnEmailSwitchTippyUnCheck' id="SendOnEmailSwitchTippy" title="Activate <b>test</b>" style='position: relative; left: 20px; top: 8px;'> <input class='form-check-input' type='checkbox' id='UserPecificMessageAdviceEmail' name='UserPecificMessageAdviceEmail' value='yes' /> <label class='form-check-label' for='flexSwitchCheckDefault'><i class='fa-regular fa-at fa-lg text-info'></i></label> </div> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script>Con la gran ayuda de atomiks, la solución... o mi culpa... fue que mi detector de eventos estaba dentro del script de Tippy, y tuvo que ser movido afuera para que el código se viera así:
const [instance] = tippy('#SendOnEmailSwitchTippy', { content: 'Activate', // the initial state // ... rest of the props ... }); const checkbox = document.getElementById('UserPecificMessageAdviceEmail'); checkbox.addEventListener('change', (event) => { if (event.currentTarget.checked) { instance.setContent('Deactivate'); } else { instance.setContent('Activate'); } });Espero que esto pueda ayudar a otros :-)