How to enable and customize tooltips for edges and nodes
Tips & TricksSummary
It also shows how you can customize those tooltips to show specific information instead of the label text.
This article was written for an older version. It is only online as a reference for customers using this old version. The information it contains is probably out of date.
The latest information can be found in the yFiles documentation
Description
To enable tooltips for nodes in your Graph2D, you have to set showNodeTips(true) in your EditMode.
For Edges set showEdgeTips(true) respectively.
By default the shown tooltip will be the label text of the according element.
You can customize the tooltip by overwriting EditMode's method getNodeTip(y.base.Node) which returns the customized tooltip text for a given node.
The returned value can be common text or even HTML, which gives you a large amount of possibilities on customizing the tooltips.
Since yFiles 2.2.1 it is also possible to use a custom JToolTip instance to render the tooltip. This can be done by subclassing Graph2DView and overriding its method createToolTip()
The yFiles for Java tutorial which comes with yFiles for Java 2.7 and higher also shows how to create a dedicated EditMode implementation just for displaying tooltips.
You can find the source code of this EditMode in the tutorial/src/ directory of your yFiles for Java installation.
For a detailed example on overwriting getNodeTip(y.base.Node) see the following samplecode.
package demo.view;
import java.awt.Color;
import java.awt.EventQueue;
import y.base.Edge;
import y.base.Node;
import y.base.NodeCursor;
import y.layout.BufferedLayouter;
import y.layout.hierarchic.IncrementalHierarchicLayouter;
import y.layout.hierarchic.incremental.SimplexNodePlacer;
import y.view.Arrow;
import y.view.EditMode;
import y.view.Graph2D;
import y.view.NodeRealizer;
public class TooltipDemo extends ViewActionDemo {
public TooltipDemo() {
Graph2D graph = view.getGraph2D();
graph.getDefaultEdgeRealizer().setTargetArrow(Arrow.STANDARD);
// create nodes
Node v1 = graph.createNode(0,0,"Node 1");
graph.getRealizer(v1).setFillColor(Color.RED);
Node c1 = graph.createNode(0,0,"Node 2");
graph.getRealizer(c1).setFillColor(Color.GREEN);
Node c2 = graph.createNode(0,0,"Node 3");
graph.getRealizer(c2).setFillColor(Color.BLUE);
for (NodeCursor nc = graph.nodes(); nc.ok(); nc.next()) {
graph.setSize(nc.node(), 100,50);
}
//create edges
Edge e1 = graph.createEdge(v1,c1);
Edge e2 = graph.createEdge(v1,c2);
//layout graph
IncrementalHierarchicLayouter layouter = new IncrementalHierarchicLayouter();
((SimplexNodePlacer)layouter.getNodePlacer()).setBaryCenterModeEnabled(true);
layouter.setOrthogonallyRouted(true);
new BufferedLayouter(layouter).doLayout(graph);
view.fitContent();
}
protected EditMode createEditMode() {
EditMode mode = new EditMode() {
//overwrite getNodeTip with custom tooltip information
public String getNodeTip(Node v) {
//get NodeRealizer of node
NodeRealizer nr = ((Graph2D)v.getGraph()).getRealizer(v);
int red = nr.getFillColor().getRed();
int green = nr.getFillColor().getGreen();
int blue = nr.getFillColor().getBlue();
//return custom tooltip
return "<html><b>Tooltip as HTML</b>" +
"<table style=\"background-color:white\" >" +
"<tr><td>Label text:</td><td>"+nr.getLabelText()+"</td></tr>" +
"<tr><td>Color (R/G/B):</td><td><span style=\"background-color:rgb("+red+","+green+","+blue+")\"> </span> "
+red+"/"+green+"/"+blue+"</td></tr>" +
"<tr><td>Incoming Edges:</td><td>"+v.inDegree()+"</td></tr>" +
"<tr><td>Outgoing Edges:</td><td>"+v.outDegree()+"</td></tr>" +
"</table>";
}
// overwrite getEdgeTip with custom tooltip information
public String getEdgeTip(Edge e) {
return "Tooltip as simple text: Edge from "+e.getGraph().getSource(e)+" to "+e.getGraph().getTarget(e);
}
};
//enable node tooltips
mode.showNodeTips(true);
//enable edge tooltips
mode.showEdgeTips(true);
return mode;
}
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
initLnF();
new TooltipDemo().start("Tooltip Demo");
}
});
}
}
src/demo/view/ directory of your yFiles installation.