2

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

2 回答 2

1

做就是了：

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

于 2020-05-05T17:23:22.847 回答
1

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

interactive: true option

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

于 2018-11-01T12:04:25.463 回答