Question

I want to show a tooltip (by using qtip) on node mouseover. In order to do this inside the

cy.nodes().bind("mouseover", function() { ... } 

I need to bind the tooltip to a certain svg element. I cannot find a function on the node’s public interface that would return the svg element to do this nor a way that I could directly add attributes to the individual node svg element during initialization. Cy certainly has this svg information stored in its _private. Of course I could find the svg element by calling node.position() and then searching the corresponding svg element, but is there a cleaner way to get it, straight from the node object interface?

Edit: Atanas’s suggestion works but I’m not sure whether it’s a permanent solution. I want tooltip disabled on mouseout/zoom/pan/grab/select/.. which means I need to bind

$(".ui-tooltip").qtip('hide');

to those events on cy. I’d rather rely on qtip events and delays in displaying the tooltip. Now the tooltip seems a bit buggy since it’s immediately hidden on these events.

Answer 1

I recently did more or less the same thing – showing qtips on nodes – and it works. Here is my code, hope it helps:

    cy.nodes().bind("mouseover", function(oEvent){
        var eid = this.data("id");

        $qtipDiv.css({
            "left": oEvent.clientX,
            "top": oEvent.clientY,
        });

        var menutext = "some text to be shown in tooltip";

        $qtipDiv.qtip({
            content: {
                text: menutext
            },
            show: {
                delay: 0,
                event: false,
                ready: true,
                effect: false
            },
            position: {
                viewport: true,
                adjust: {
                    method: "shift"
                }
            },
            style: {
                classes: "ui-tooltip-tipsy"
            }
        });
    });