I have tried different variations of changing the tippy tooltip text depending on the check/uncheck state of a checkbox, and the closest I have gotten to get it to work is the below JS script, unfortunately I get undefined in the tippy, and I am unable to figure out what I am missing.
Can anyone help?
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>With the great help from atomiks the solution .. or my fault .. was that my eventlistener was inside the Tippy script, and had to be moved outside so that the code looks like this:
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');
}
});
Hope this can help others :-)