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/