Bookmark with submit Everybody%20wants%20tooltips reddit

Everybody wants tooltips

I get lot's of e-mails from JSViz users that want to know how to integrate tooltips into their graphs. Up until now, my responses have been something like this:

Yeah, that's super easy and everyone is always asking. I'll work up an example as soon as I have moment.

So I had a moment and here it is:

Snowflake Graph with Tooltips

I modified the XML Snowflake Graph example to display a tooltip when you mouse over a node. Here's how you can add tooltips to your graph:

Add a DIV element to the body of your HTML to hold the contents of your tooltip.

<div id="debug" style="position:absolute"></div>

Add some functions to show and hide the tooltip.

window.showToolTip = function(dataNode, modelNode) {
	var tt = document.getElementById("tooltip");
	tt.innerHTML="Color: " + dataNode.color;"block";*window.layout.view.skewX + window.layout.view.centerX + 5) + "px";*window.layout.view.skewY + window.layout.view.centerY - 25) +  "px";
window.hideToolTip = function() {
	var tt = document.getElementById("tooltip");"none";

You'll notice we do some funny stuff to position the tooltip. In our graph, the center is at (0, 0), and we use an optional skewing factor to ensure we use all of the available space to render the graph. We need to convert these coordinates to those of the window.

We attach event handlers to the mouseover and mouseout events for each node.

nodeElement.onmouseover =  new EventHandler( window, window.showToolTip, dataNode, modelNode );
nodeElement.onmouseout =  new EventHandler( window, window.hideToolTip, dataNode, modelNode );

Note that I placed the show and hide functions in the global scope (which you can access most quickly with "window"). I suggest that if you're building a larger application that uses other libraries, you should wrap your functions in an object to avoid namespace collisions.

Finally, we add some CSS to style the tooltip.

	position: absolute;
	display: none;
	border: 1px solid #888888;
	background: #ffffee;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding: 2px;
	z-Index: 20;

That's it. Have Fun!


TrackBack URL for this entry:


Very very nice Kyle I have been tasked with attempting to do a ThinkMap implementation using your library. So it will be interesting to see what I come up with. I check this site daily to see if there any new versions of the library that have optimized rendering schemes. One thing that I know will be a requirement is to show relationships on a sibling level and presedence of a node. For example the 'influence' that node has agaisnt other nodes as the component I need to develop is targeted towards a social network map.

Edge labels!

That's all we need. =]

Hey Jeremy, what's new? I finished a short round of updates a couple of weeks back that includes support for edge labels. I'll post about it over the next couple of days.

Hey Will, Are you working with the Force Directed model? You can demonstrate the magnitude of relationships between nodes by adding a spring relationship between them, and specifying a spring constant that's representative of the magnitude.

If you are using ForceDirectedLayout.js, you'll probably want to override the "addSimilarity" function with a function that assigns an appropriate spring constant. That Layout could really use some work and I'm open to suggestions (and contributions) if you've got 'em. Have fun!

That's great, Kyle! I hope things are going well at Google. One other thing I was wondering (I don't even know if it's possible): Can you have pre-computed layouts? I guess what I'm asking is will your code work as an in-browser version of Graphviz. If you had a somewhat static set of nodes/edges, then pre-computing the positions of the graph elements would save a lot of time/processing. You'd still have all the interactivity once it was displayed in a browser but you wouldn't have to compute all the forces/springs/whatever in real-time. It would be even better if you could view a specific "window" of a large graph, and then be able to shift to different section of the graph when needed, but that might be too much to ask. Anyway, either way, keep up the great work!

Has anyone got these to work with Internet Explorer 7. Besides the nasty Active-X box that pops up, i get a "(Mozilla) - [object error]" message in internet explorer 7. The only one that works at all in IE7 is the RandomCircuit_ForceDirected model. Any time I try to load XML into it, IE7 breaks completely.

I managed to get firefox to work with a much more complicated XML schema. Links, names and a lot of other features were no problem. Internet explorer is a mess.

Does anyone know if there is a way to make it so that when a node is moved say in the tooltip example the node stays where you move it...instead of popping back to it's original location?


Does anyone know if there is a way to make it so that when a node is moved say in the tooltip example the node stays where you move it...instead of popping back to it's original location?


Please could you post the example which contains edge labels in SVG?

I tried edge labels in HTML, I got it?

Can we use textPath?

Your blog is spectacular. I'm really excited and expecting the best for your next post. I hope we'll get it soon. Really value this article in particular. It's tough to separate the good from the bad these days, but I believe you've pushed the right key! Do you accept guest articles here? I would like to post a few articles here.

This site is great!!

This site is great!!

Hi, Where are you from? Is it a secret? :)

Could you possibly show me where I can find a number your earlier posts? There's a lot here that i'm finding real interesting.

It’s great to see people freely expressing their :: blog :: Everybody wants tooltips was a wonderful read. Thanks for your insights.

I am only 50 but can’t believe how everyone needs advice on how to survive an economic disaster or how anyone even got into an bad economic situation. Health problems should be the only shoes

I really like your blog, I feel we have a common love from your blog. Hope you make friends with me, and give more exchanges later. I have a website about shoes [url=" /"] [/url] , you can have a look.

Another reason that I would regard joining a political party to be such a valuable thing is that dramatically positive and liberating experience.

Post a Comment


Project Blog