Включить поле ввода в подсказку Tippy

Я просто использую возможность Tippy, чтобы поле ввода было включено во всплывающую подсказку. Все работает нормально, за исключением того, что в поле ввода ничего нельзя записать. Возможно ли это сделать? Как?

Вот мой код:

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
<script>
    tippy.setDefaults({
        allowHTML: 1,
        trigger: 'click',
        hideOnClick : 'toggle'
    })
function initAllValues() {
    tippy('.enery', {
      content: document.querySelector('#myTemplate')
    })
}
</script>
</head>
<body onload="initAllValues()">
<span class="enery">Text</span>
<div id="myTemplate">
  My HTML <strong style="color: pink;">tooltip</strong> content with an input field <input type="number" id="catch_value">
</div>
</body>
</html>

1 ответ

Решение проще, чем задумывалось: нужно установить следующую опцию в tippy:

interactive: true option

Примечание: прямая поддержка и обсуждения доступны на их github, включая ответ на текущий вопрос: https://github.com/atomiks/tippyjs/issues/342

Просто делать:

interactive: true

как в:

function initAllValues() {
     tippy('.enery', {
         content: document.querySelector('#myTemplate'),
         interactive: true
     })
}

или в:

tippy.setDefaults({
    allowHTML: 1,
    trigger: 'click',
    hideOnClick : 'toggle',
    interactive: true
})

Также посмотрите документацию Типпи: https://atomiks.github.io/tippyjs/v6/all-props/ и FAQ по проблемам с использованием интерактивного свойства: https://atomiks.github.io/tippyjs/v6 / faq / # моя-подсказка-появляется-отрезана-или-не-показывает-вообще

Другие вопросы по тегам