qtip not showing tooltip at proper position in cytoscape.js

Question

I am trying to show tooltips in a mouseover event in cytoscape.js using qtip. The tooltip is displayed when the mouse is over a node in the graph, however, it is positioned at the top-left corner of the graph, instead of showing at the bottom of the node. Here is the code to display the graph:

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

Add here is the code I am using to add the 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'
            }
        });
    }
});

Here is a screenshot showing how the tooltip is currently being displayed:

As you can see in the image above, the tooltip displays at the top left corner of the graph. However, I want to display the tooltip like this:

How can I make the tool-tip display at the proper position? What am I doing wrong here?

Answer 1

It looks like you're missing the qtip stylesheet, which I believe qtip needs to work.

You can refer to the demo code for a working example: http://js.cytoscape.org/demos/qtip-extension/