html - 在tippy.js div中添加一个表单(在cytoscape.js的节点中)，但文本输入和按钮未激活

Question

我有一个 cytoscape.js 图，并且在每个节点中我添加了一个 tippy.js 工具提示。在工具提示内，我有一个带有文本输入的表单。一切看起来都很好，但工具提示内的文本输入和按钮未激活。

我已经改变了 div 的 z-index，所以它应该在 cytoscape Canvas 上。还是没有成功。

        var makeTippy = function (node, text) {

            return tippy(node.popperRef(), {
                    content: function () {
                            var div = document.createElement('div');
                            div.innerHTML = '<form name="input" >' +
                                                'For :  '+ node._private.data.name+'<br>'+
                                                'Value :<br>'+
                                                '<input type="text" name="value"><br>'  +                       
                                                '<input type="submit" value="Submit" />' +
                                                '</form>';
                            div.style.width = "100px";
                            div.style.height = "120px";
                            //div.style.background = "black";
                            div.style.color = "white";
                            div.style.position= "relative";
                            div.style.zIndex = "1500";                  
                            return div;
                    },
                    trigger: 'manual',
                    arrow: true,
                    placement: 'bottom',
                    hideOnClick: false,
                    multiple: true,
                    followCursor: true,
                    theme: 'run', 
                    sticky: true
                });

        };

Answer 1

最后，它通过将tippy实例的交互设置为true来工作:

互动:真实，