qtip 未在 cytoscape.js 中的正确位置显示工具提示

Question

我正在尝试使用 qtip 在cytoscape.js 的鼠标悬停事件中显示工具提示。当鼠标悬停在图表中的某个节点上时会显示工具提示，但是它位于图表的 左上角 角，而不是显示在节点的底部。这是显示图表的代码：

this.cyto = cytoscape({
    container: document.getElementById("graph"),
    layout: {
        name: 'spread',
        minDist: 200
      },
    elements: this.graph.elements,
    style: this.cy_style
});

这里添加的是我用来添加qtip的代码

this.cyto.nodes().forEach(function (element) {
    var nodeName = element.data("name");
    if (nodeName) {
        element.qtip({
            content: {
                text: nodeName
            },
            position: {
                my: 'bottom center',
                at: 'bottom center',
                adjust: {
                    y: 50,
                    mouse: false
                }
            },
            show: {
                event: 'mouseover'
            },
            hide: {
                event: 'click mouseout'
            },
            style: {
                classes: 'qtip-bootstrap'
            }
        });
    }
});

这是显示工具提示当前显示方式的屏幕截图：

如上图所示，工具提示显示在图表的左上角。但是，我想像这样显示工具提示：

如何使工具提示显示在正确的位置？我在这里做错了什么？

Answer 1

您似乎缺少 qtip 样式表，我认为 qtip 需要使用它。

您可以参考演示代码以获取工作示例：http://js.cytoscape.org/demos/qtip-extension/