#javascript #tippyjs
#язык JavaScript #типпи джей
Вопрос:
Я пробовал различные варианты изменения текста подсказки tippy в зависимости от состояния флажка «проверить/снять флажок», и самое близкое, что мне удалось заставить его работать, — это приведенный ниже сценарий JS, к сожалению, я не определился в подсказке, и я не могу понять, чего мне не хватает.
Кто-нибудь может помочь?
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) =gt; { 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', }); lt;div class='form-check form-switch switch switch-info SendOnEmailSwitchTippyUnCheck' id="SendOnEmailSwitchTippy" title="Activate lt;bgt;testlt;/bgt;" style='position: relative; left: 20px; top: 8px;'gt; lt;input class='form-check-input' type='checkbox' id='UserPecificMessageAdviceEmail' name='UserPecificMessageAdviceEmail' value='yes' /gt; lt;label class='form-check-label' for='flexSwitchCheckDefault'gt;lt;i class='fa-regular fa-at fa-lg text-info'gt;lt;/igt;lt;/labelgt; lt;/divgt; lt;script src="https://unpkg.com/@popperjs/core@2"gt;lt;/scriptgt; lt;script src="https://unpkg.com/tippy.js@6"gt;lt;/scriptgt; Ответ №1:
С большой помощью atomiks решение .. или моя вина .. состояло в том, что мой список событий находился внутри скрипта Tippy, и его пришлось перенести наружу, чтобы код выглядел так:
const [instance] = tippy('#SendOnEmailSwitchTippy', { content: 'Activate', // the initial state // ... rest of the props ... }); const checkbox = document.getElementById('UserPecificMessageAdviceEmail'); checkbox.addEventListener('change', (event) =gt; { if (event.currentTarget.checked) { instance.setContent('Deactivate'); } else { instance.setContent('Activate'); } }); Надеюсь, это может помочь другим 🙂