Fetching svg element from node object in cytoscape.js

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

Cytoscape.JS was recently updated to use a HTML5 Canvas renderer for performance reasons. (This occurred approximately in August-Sept 2012)

Obtaining the event positions for node hovering is not completely implemented as of the current beta, but it does seem like a very important feature.

You can confirm the status of the implementation by typing this in the Javascript console:

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

This feature should be implemented very soon.

Answer 2

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"
            }
        });
    });