在Cytoscape.js节点的Tippy.js弹窗内嵌表单，输入框与按钮无法交互

我之前也碰到过一模一样的问题，核心根源主要在两个地方：Tippy默认不允许内部元素交互，再加上Cytoscape的画布事件可能会拦截提示框的响应。结合你的代码，给你几个具体的修复步骤：

1. 开启Tippy的交互模式 #

Tippy的interactive属性默认是false，这会直接阻止用户和提示框内的输入框、按钮交互。你必须显式把它设为true，才能让表单元素接收鼠标和键盘事件。

2. 将提示框挂载到document.body #

默认情况下，Tippy会把提示框附加到目标节点的父容器中，而Cytoscape的画布可能存在事件捕获或者层级优先级的问题。通过appendTo: document.body把提示框直接挂载到body上，能彻底避开Cytoscape的事件干扰。

3. 优化代码细节（可选但更易维护） #

你代码里的HTML转义字符（比如<）可以直接替换成普通HTML标签，可读性会更好；另外z-index的设置保持不变即可，确保它高于Cytoscape画布的层级。

修改后的完整代码： #

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.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,
    // 新增的关键配置
    interactive: true,
    appendTo: document.body
  });
};

额外检查点 #

• 确认Tippy.js是最新版本，旧版本可能存在交互相关的bug；
• 打开浏览器开发者工具，检查提示框元素的z-index是否确实高于Cytoscape画布，同时确认没有其他元素遮挡它；
• 如果需要处理表单提交逻辑，记得给表单添加submit事件监听并阻止默认提交行为：

  // 在content函数创建div后，添加这段代码
  div.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    var inputValue = this.querySelector('input[name="value"]').value;
    console.log('提交的值:', inputValue, '对应节点:', node._private.data.name);
    // 这里添加你的业务处理逻辑
  });
  

内容的提问来源于stack exchange，提问作者galatia