html - 在tippy.js div中添加表单(在cytoscape.js的节点中),但文本输入和按钮不活动
问题描述
我有一个 cytoscape.js 图,并且在每个节点中我添加了一个 tippy.js 工具提示。在工具提示中,我有一个带有文本输入的表单。一切看起来都很好,但工具提示内的文本输入和按钮未激活。
我已经改变了 div 的 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.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
});
};
解决方案
最后,它通过将tippy实例的interactive设置为true来工作:
互动:真实,
推荐阅读
- r - “terms.formula(公式,数据=数据)中的错误:'。' 在公式中,在老鼠的“with()”函数中没有“数据”参数”
- c# - 如何检查从数据库中检索到的当前日期时间是否在 c# 中已经过了午夜?
- python - 根据 Python 中 group_by 数据框中的先前值计算百分比
- python - Bot 无法识别消息在初始发送后约 5 秒后被删除(服务器消息删除)
- python - 如何在 Jupyter Notebook 中导入 Pyperclip?
- windows - 使用批处理文件确定网络共享映射到哪个驱动器号
- arcore - VR耳机模拟器
- html - Flex 布局:桌面上的 div 发生在下面,但在移动设备上是所有内容的最后一个
- javascript - 如何使用 JavaScript 使图像在自定义路径上移动?
- r - 如何估计 R 中的分位数回归预测