CODEWITHSUNDEEP
eventsqtip2cytoscape.js
dwjohnston
dwjohnston

Reputation: 11771

Prevent hiding for cytoscape qtip

I'm using the Cytoscape Qtip extension to display qtips when you click nodes.

Usually you can prevent qtips from hiding when with the hide: false option. When this is used, you can still hide the qtips if it has a button.

However, when using cytoscape, this appears to not work. When clicking else where, a hide event will be triggered. 

cy.elements().qtip({
    content: function(event, api){
        api.set('content.button', true);
        return 'Example qTip on ele ' + this.id();
    },
    position: {
        my: 'top center',
        at: 'bottom center'
    },
    hide: false,
    style: {
        classes: 'qtip-bootstrap',
        tip: {
            width: 16,
            height: 8
        }
    }

    events: {
              hide: function(event, api){
                 console.log(event);
              }
    }
});

I can prevent the hide event from following through with event.preventDefault(), but this will also stop the the close button from hiding the event, which is a bit messy.

Any idea while it's behaving this way?

Upvotes: 1

Views: 262

Answers (3)

dwjohnston
dwjohnston

Reputation: 11771

Cleanest solution I've found is to give a garbage event for the hide event.

Using null, false or "" all don't seem to work. 

hide: {
    event: "asdf" //garbage event to allow hiding on close button click only
},

Upvotes: 0

maxkfranz
maxkfranz

Reputation: 12242

Remember that because this wraps Qtip on non-DOM elements, bindings to Cytoscape graph elements must be made. These bindings are outside of the DOM and outside of Qtip's control (for example, the hide case).

Did you try setting the hide event to the empty string ""?

Upvotes: 1

dwjohnston
dwjohnston

Reputation: 11771

Here's the quick and dirty to make this work (closes on button close only) if you need it:

    events:{
            hide: function(event, api){


                    if(event.originalEvent.target.parentElement.parentElement.id != this[0].id){
                        event.preventDefault();
                    }

    }

Explanation:

  • Any mouse clicks will trigger a hide event all visible qtips.
  • We look at target of that mouse click (event.originalEvent.target.parentElement.parentElement.id) to see it close box of the qtip that is currently try to close. If it's not then we preventDefault().

This is potentially pretty bed performance wise, because it run these preventDefault() for every open qtip on every mouse click.

Upvotes: 1

Related Questions