node/edge tooltip with onclick (instead of mouseover)
Illes Farkas
Do you happen to know how to make node tooltips appear/disappear with
a click on the node?
Right now, we're using the onmouseover (hover) node tooltips allowed
by cytoscape web, but node tooltips controllable (both turning on and
off) with onclick (as in GeneMania) would be much better for our
visualization. Also, we would like to use edge tooltips controllable
(on / off) by clicking on the selected edge. Is this possible with
Cytoscape Web?
If not, then what do you think would might the most efficient methods
for adding these features?
Many thanks,
Illes Farkas
--
http://hal.elte.hu/fij
Max Franz
Fengyuan Hu
Fengyuan Hu
Max Franz
Fengyuan Hu
Max Franz
Fengyuan Hu
The follow code is for my qtip impl in a listener, somehow, the show and hide is not working properly, could you share some ideas? Thanks.
.addListener("click", "edges", function(evt) {
jQuery(document.body).qtip({
content: 'Hello, CytoscapeWeb',
style: {
border: {
width: 3,
radius: 8,
color: '#6699CC'
},
tip: 'bottomLeft',
name: 'cream'
},
position: {
corner: {
target: 'topLeft',
tooltip: 'topLeft'
},
adjust: {
x: evt.mouseX, y: evt.mouseY // cytoscapeweb_div offset to be added
}
},
show: { delay: 0 },
hide: { when: { event: 'unfocus' } }
});
})
Max Franz
$("body").qtip({
content: {
text: text,
title: {
text: title + ' <div class="ui-state-default ui-corner-all minimise"> <span class="ui-icon"></span> </div> ',
button: '<div class="ui-state-default ui-corner-all"> <span class="ui-icon ui-icon-close"></span> </div>'
}
},
position: {
target: false,
type: "absolute",
corner: {
tooltip: position,
target: "leftTop"
},
adjust: {
mouse: false,
x: x,
y: y,
scroll: false,
resize: false
}
},
show: {
delay: 0,
when: false,
effect: { type: "fade", length: 0 },
ready: true // Show the tooltip when ready
},
hide: {
delay: 0,
effect: { type: "fade", length: 0 },
when: { event: "unfocus" }, // Hide when clicking anywhere else
fixed: true // Make it fixed so it can be hovered over
},
style: {
border: { width: 1, radius: 8 },
width: {
min: ( evt.group == "nodes" ? 0 : maxW ),
max: ( maxW )
},
screen: true,
padding: outer_padding,
textAlign: 'left',
name: 'light', // Style it according to the preset 'cream' style,
tip: true // Give it a speech bubble tip with automatic corner detection
}
});
Fengyuan Hu
Naveed
such that they can be moved around? The way the GeneMANIA tooltips
are. I could not find that documented on the qtip website.
This is a very helpful thread. I like the way Fenyuan uses to
calculate the position of the qtip based on evt.mouseX/Y. I have
combined that with Max's example and it works pretty well. Would be
much nicer if I could figure out how to make the tooltip draggable.
Thanks,
Naveed
>
> >>> It would be something like this to position it in the centre of the node.
>
> >>> // in node click callback function
>
> >>> var x = $("#cytoweb_div").offset.x + event.target.x;
> >>> var y = $("#cytoweb_div").offset.y + event.target.y;
>
> >>> $("body").qtip({
>
> >>> ...
>
> >>> position: { x: x, y: y }
>
> >>> ...
>
> >>> });
>
>
> >>>> Hi Max,
>
> >>>> It would be clear if you can show some example code?
>
> >>>> Cheers
> >>>> Fengyuan
>
>
> >>>>> You'll have to attach the qtips to the body itself and position them
> >>>>> manually using the position of the cytoweb div and the position of the
> >>>>> elements in cytoweb from events.
>
>
> >>>>>> Hi Max,
>
> >>>>>> I tried to create qTip to display more customized tips. However, I'm
> >>>>>> not sure how to get the position or html element to display qtip on the
> >>>>>> network. The GeneMANIA example is apparently acting a bit differently as
> >>>>>> normal qtip (some new features must be implemented to improve this as you
> >>>>>> mentioned.). Could you please share me some hints?
>
> >>>>>> Cheers
> >>>>>> Fengyuan
>
>
> >>>>>>> Hi,
>
> >>>>>>> Cytoscape Web provides a simple tooltip mechanism only on mouseover,
> >>>>>>> because Cytoscape Web has to work well across many different use cases for
> >>>>>>> different uses of graphs. So, the philosophy is flexibility and simplicity
> >>>>>>> over niche. Using the events exposed by Cytoscape Web, it is not hard to
> >>>>>>> create a tooltip on the click event of a node or edge.
>
> >>>>>>> As for GeneMANIA, it makes use of the click event that Cytoscape Web
> >>>>>>> exposes to create its own tooltips. If you want to use the same library as
> >>>>>>> GeneMANIA to create the tooltips, take a look at qTip (
> >>>>>>>http://craigsworks.com/projects/qtip/). We've made some novel
> >>>>>>> improvements on the tooltip, but the core functionality of qTip is the same.
>
> >>>>>>> Make sure to not use Cytoscape Web's tooltips in tandem with qTip or
> >>>>>>> you'll have things shown on mouseover and on click.
>
> >>>>>>> Cheers,
> >>>>>>> Max
>
Max Franz
Tooltips are not normally draggable---on the web or otherwise---and
qtip does not support this natively.
You can add the functionality using the jQuery UI function "draggable".
Cheers,
Max
Naveed Massjouni
this? Is this modified code available anywhere? Do you think there is
an easy way to apply the jQuery UI draggable function from the
javascript code in the webpage, as opposed to modifying the qtip
source?
Thanks,
Naveed
Max Franz
approach as GeneMANIA. It's more modular this way; you take advantage
of qtip updates.
If you modify qtip, please contact the devs there so you could
possibly merge the changes back into qtip itself.
Cheers,
Max