Include an input field in a Tippy tooltip

Question

I simply use Tippy capability to have an input field included in the tooltip. Everything works fine, except that it is impossible to write anything in the input field. Is it possible to do it? How?

Here is my code:

<!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>

score 1 · Answer 1 · answered Nov 01 '18 at 12:04

Solution as easier than thought: One has to set the following option in tippy:

interactive: true option

Note: direct tippy support and discussions is available on their github, including answr to the present question: https://github.com/atomiks/tippyjs/issues/342#event-1935111700

score 1 · Answer 2 · answered May 05 '20 at 17:23

Just do:

interactive: true

as in:

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

or in:

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

Also have a look at Tippy's docs: https://atomiks.github.io/tippyjs/v6/all-props/#interactive and FAQ for problems using the interactive property: https://atomiks.github.io/tippyjs/v6/faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all

Include an input field in a Tippy tooltip

2 Answers2