Включить поле ввода в подсказку 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 / # моя-подсказка-появляется-отрезана-или-не-показывает-вообще