CODEWITHSUNDEEP
cytoscape.js
Suzanne Paley
Suzanne Paley

Reputation: 192

cytoscape.js-qtip: show.delay not working

I'm using cytoscape.js-qtip for mouseovers on nodes, but I want to specify the show.delay option. It doesn't seem to be working -- the tooltips still come up immediately. In order to test this out in as simple a situation as possible, I tried tinkering with the standard demo.html that comes with cytoscape.js-qtip, so that the tooltips are 1) only on nodes, 2) triggered on mouseovers rather than on tap by adding show and hide options, and 3) have a delay option of 3s. I left everything else the same. The tooltips still come up immediately. When I checked the value of show.delay using the api, it was set to 3000, as expected. Does this functionality just not work w/ this wrapper, or am I doing something wrong? Here's the changed section of the demo code:

            cy.nodes().qtip({
                content: function(){ return 'Example qTip on ele ' + this.id() },
                position: {
                    my: 'top center',
                    at: 'bottom center'
                },
                show: { event: 'mouseover',
                        delay: 3000
                },
                hide: { event: 'mouseout'
                },
                style: {
                    classes: 'qtip-bootstrap',
                    tip: {
                        width: 16,
                        height: 8
                    }
                }
            });

Upvotes: 1

Views: 755

Answers (2)

Suzanne Paley
Suzanne Paley

Reputation: 192

After discussing this with Max via email, he suggested I generate my own custom event, and gave me some help doing so. The following works to generate a qtip requiring a 1s hover for both nodes and edges:

var hoverTimeout;
var hoverDelay = 1000; // 1sec
var hoverElt = cy.collection(); // empty set so no null checks needed

cy.on('mouseover', 'node', function(evt){
	hoverElt = this;
	clearTimeout( hoverTimeout );  
	hoverTimeout = setTimeout(function(){hoverElt.trigger('hover');},
                                  hoverDelay);
    })
  .on('mouseover', 'edge', function(evt){
	hoverElt = this;
	var container = cy.container();
	// Edges don't have their own position, so in order for an edge qtip
	// to come up near the edge (actually, near the mouse event), we have 
	// to adjust its position manually.
	var api = hoverElt.qtip('api');
	api.set('position.adjust.x', 
            evt.cyRenderedPosition.x + container.offsetLeft);
	api.set('position.adjust.y', 
            evt.cyRenderedPosition.y + container.offsetTop);
	clearTimeout( hoverTimeout );  
	hoverTimeout = setTimeout(function(){hoverElt.trigger('hover');},
                                  hoverDelay);
    })
  .on('mouseout', 'node,edge', function(){
	clearTimeout( hoverTimeout );
	hoverElt.trigger('hovercancel');
    });

cy.elements().qtip({
	content: 'This is a tooltip',
	show: { event: 'hover'}, 
	hide: { event: 'hovercancel' },
    });

Upvotes: 1

maxkfranz
maxkfranz

Reputation: 12242

I don't think that will work out of the box, because the extension has to bypass and workaround the Qtip events system in order for it to work on (non-HTMLDomElement) graph elements.

Github issue : https://github.com/cytoscape/cytoscape.js-qtip/issues/6

Upvotes: 1

Related Questions