时间戳

首页 > 解决方案 > 在 Tippy 工具提示中包含输入字段

input - 在 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>

标签： inputtippyjs

解决方案

做就是了：

interactive: true

如：

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

或在：

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

还可以查看 Tippy 的文档：https ://atomiks.github.io/tippyjs/v6/all-props/#interactive和使用交互属性问题的常见问题解答：https ://atomiks.github.io/tippyjs/v6 /faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all

推荐阅读