1

I want to use qtip together with cytoscape.js to dispaly tooltips in nodes on mouseover event in graph created with cytoscape.js. I have placed following code inside ready: function() as shown below:

      cy.on('mouseover','node',function (event) {

        var eid = $(this).data('id');

        $(this).qtip({
            overwrite: false,
            content: eid,
            position: {
                my: 'right center',
                at: 'left center',
                target: $(this)
            },
            show: {
                event: event.type,
                ready: true
            },
            hide: {
                fixed: true
            }
        }, event); 

    });

But, there is no tooltip displaying in node on mouseover event.. Please help me.

hp36
  • 269
  • 1
  • 6
  • 20
  • You can't. cystoscape uses canvas, and qtip needs a node to attach itself to. – Layke Jan 09 '14 at 11:44
  • Please see the answer to your similar question: http://stackoverflow.com/questions/20993149/how-to-add-tooltip-on-mouseover-event-on-nodes-in-graph-with-cytoscape-js – maxkfranz Jan 09 '14 at 15:24
  • I have tried by using **cy.on()** method to bind event as shown in above code, but it is not working. Please help. – hp36 Jan 10 '14 at 04:44
  • You can't call qtip on a cy.js element, and you're wrapping cy.js elements with jQuery -- which will never work. If you follow the instructions in your other question, you'll be able to get things working: http://stackoverflow.com/questions/20993149/how-to-add-tooltip-on-mouseover-event-on-nodes-in-graph-with-cytoscape-js – maxkfranz Jan 14 '14 at 17:12
  • Hi @maxkfranz, I have followed instructions in this [post](http://stackoverflow.com/questions/20993149/how-to-add-tooltip-on-mouseover-event-on-nodes-in-graph-with-cytoscape-js). It would be clear if you can show some example code to do this. Please help. – hp36 Jan 16 '14 at 08:40

2 Answers2

0

Provide the correct coordinate to qtip to interact with node hovering. It can be done with cyPosition Hope this helps:

                cy.on('mousemove','node', function(event){
                var target = event.cyTarget;
                var sourceName = target.data("source");
                var targetName = target.data("target");

                var x=event.cyPosition.x;
                var y=event.cyPosition.y;                 


                        $("#box").qtip({
                            content: {
                                title:targetName,
                                text: sourceName
                            },
                            show: {
                                delay: 0,
                                event: false,
                                ready: true,
                                effect:false

                            },
                            position: {
                                my: 'bottom center',
                                at: 'top center',

                                target: [x+3, y+3],
                                adjust: {
                                    x: 7,
                                    y:7

                                }

                            },
                            hide: {
                                fixed: true,
                                event: false,
                                inactive: 2000

                            },


                            style: {
                                classes: 'ui-tooltip-shadow ui-tooltip-youtube',

                                tip:
                                {
                                    corner: true,
                                    width: 24,         // resize the caret
                                    height: 24         // resize the caret
                                }

                            }

                    }
                });
            })

also you are not specifying event target. And don't forget to use mousemove while dealing with canvas.

nyxem1
  • 179
  • 1
  • 4
  • 16
  • Can u please specify element with id **box**? Tooltip should appear on selected node. How will I get id of selected node? – hp36 May 05 '14 at 04:21
  • "box" is the tooltip div. Put it within your cytoscape container like this
    . And on hovering you will get id/name of node on tooltip. By my code, it will give you tooltip name. Just console.log(target) to figure it out yourself     – nyxem1 May 05 '14 at 05:52
  • This is showing tips, but not at right position. It is about 400px below node, and if I shift my graph by moving it with mouse then it is worse. Coordinates x and y are not aligned with tips coordinates. – emir Dec 31 '16 at 19:12
0

Here is the best solution I found today. Just include this code in your ready function, and besides qtip functions and css, include https://github.com/cytoscape/cytoscape.js-qtip, it will show tip when node or edge is clicked

    cy.elements().qtip({
                content: function(){ return 'Example qTip on ele ' + this.id() },
                position: {
                    my: 'top center',
                    at: 'bottom center'
                },
                style: {
                    classes: 'qtip-bootstrap',
                    tip: {
                        width: 16,
                        height: 8
                    }
                }
            });
            // call on core
            cy.qtip({
                content: 'Example qTip on core bg',
                position: {
                    my: 'top center',
                    at: 'bottom center'
                },
                show: {
                    cyBgOnly: true
                },
                style: {
                    classes: 'qtip-bootstrap',
                    tip: {
                        width: 16,
                        height: 8
                    }
                }
            });
emir
  • 1,336
  • 1
  • 14
  • 33