Question

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

Answer 1

只需：

pip install .

如：

interactive: true

或在以下位置：

function initAllValues() {
     tippy('.enery', {
         content: document.querySelector('#myTemplate'),
         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的常见问题解答

Answer 2

解决方案比想象中容易：必须在小费中设置以下选项：

interactive: true option

注意：他们的github上提供直接的支持和讨论，包括对当前问题的回答https://github.com/atomiks/tippyjs/issues/342#event-1935111700

在Tippy工具提示中包含一个输入字段

2 个答案: