Input 在Tippy工具提示中包括输入字段_Input_Tippyjs

Input 在Tippy工具提示中包括输入字段

input

Input 在Tippy工具提示中包括输入字段,input,tippyjs,Input,Tippyjs,我只是使用Tippy功能在工具提示中包含一个输入字段。除了不可能在输入字段中写入任何内容外，所有操作都正常。有可能吗？怎么做这是我的密码： <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script> <script> tippy.setDefaults({

我只是使用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>


蒂皮({
allowHTML:1，
触发器：“单击”，
单击“切换”
})
函数initAllValues（）{
蒂皮（“.enery”{
内容：document.querySelector（“#myTemplate”）
})
}
正文
带有输入字段的我的HTML工具提示

解决方案比想象的简单：必须在tippy中设置以下选项：

interactive: true option

注意：github上提供了直接的tippy支持和讨论，包括对当前问题的回答：

只需执行以下操作：

interactive: true

例如：

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

或在：

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

另外，还可以查看Tippy的文档：和常见问题解答，了解如何使用interactive属性：