144 lines
5.5 KiB
HTML
144 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS Tooltips -- Northwoods Software</title>
|
|
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
|
|
<script src="../release/go.js"></script>
|
|
<script src="goIntro.js"></script>
|
|
</head>
|
|
<body onload="goIntro()">
|
|
<div id="container" class="container-fluid">
|
|
<div id="content">
|
|
|
|
<h1>ToolTips</h1>
|
|
<p>
|
|
<b>GoJS</b> provides a way to create customized tooltips for any object or for the diagram background.
|
|
</p>
|
|
<p>
|
|
A tooltip is an <a>Adornment</a> that is shown when the mouse hovers over an object that has its <a>GraphObject.toolTip</a> set.
|
|
The tooltip part is bound to the same data as the part itself.
|
|
</p>
|
|
<p>
|
|
See samples that make use of tooltips in the <a href="../samples/index.html#tooltips">samples index</a>.
|
|
</p>
|
|
<p>
|
|
In this example each <a>Node</a> has its <a>GraphObject.toolTip</a> property set to a Part that shows the
|
|
data.color property via a normal data binding.
|
|
The diagram gets its own tooltip by setting <a>Diagram.toolTip</a>.
|
|
</p>
|
|
<pre data-language="javascript" id="tooltips">
|
|
diagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
$(go.Shape, "RoundedRectangle",
|
|
{ fill: "white" },
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock, { margin: 5 },
|
|
new go.Binding("text", "key")),
|
|
{
|
|
toolTip: // define a tooltip for each node that displays the color as text
|
|
$(go.Adornment, "Auto",
|
|
$(go.Shape, { fill: "#FFFFCC" }),
|
|
$(go.TextBlock, { margin: 4 },
|
|
new go.Binding("text", "color"))
|
|
) // end of Adornment
|
|
}
|
|
);
|
|
|
|
// a function that produces the content of the diagram tooltip
|
|
function diagramInfo(model) {
|
|
return "Model:\n" + model.nodeDataArray.length + " nodes, " +
|
|
model.linkDataArray.length + " links";
|
|
}
|
|
|
|
// provide a tooltip for the background of the Diagram, when not over any Part
|
|
diagram.toolTip =
|
|
$(go.Adornment, "Auto",
|
|
$(go.Shape, { fill: "#CCFFCC" }),
|
|
$(go.TextBlock, { margin: 4 },
|
|
// use a converter to display information about the diagram model
|
|
new go.Binding("text", "", diagramInfo))
|
|
);
|
|
|
|
var nodeDataArray = [
|
|
{ key: "Alpha", color: "lightblue" },
|
|
{ key: "Beta", color: "pink" }
|
|
];
|
|
var linkDataArray = [
|
|
{ from: "Alpha", to: "Beta" }
|
|
];
|
|
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
|
|
</pre>
|
|
<script>goCode("tooltips", 250, 100)</script>
|
|
<p>
|
|
Try pausing the mouse over each of the nodes or in the background of the diagram.
|
|
If you copy some parts, you will see that the tooltip for the diagram displays newer information about the diagram.
|
|
</p>
|
|
<p>
|
|
You can change how long for the mouse has to wait motionless before a tooltip appears by setting <a>ToolManager.hoverDelay</a>.
|
|
For example, when initializing a <a>Diagram</a>, <code>"toolManager.hoverDelay": 600</code> changes the delay to be 6/10ths of one second.
|
|
</p>
|
|
<p>
|
|
You can change how long the tooltip remains visible by setting <a>ToolManager.toolTipDuration</a>.
|
|
For example, <code>"toolManager.toolTipDuration": 10000</code> changes the visible time to 10 seconds.
|
|
</p>
|
|
|
|
<h3 id="Positioning">Positioning</h3>
|
|
<p>
|
|
There are two ways to customize the positioning of the tooltip relative to the adorned GraphObject.
|
|
One way is to override <a>ToolManager.positionToolTip</a>.
|
|
Another way is to have the tooltip <a>Adornment</a> include a <a>Placeholder</a>.
|
|
The Placeholder is positioned to have the same size and position as the adorned object.
|
|
</p>
|
|
<pre data-language="javascript" id="tooltipsplaceholder">
|
|
// this is a normal Node template that also has a toolTip defined for it
|
|
diagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
$(go.Shape, "RoundedRectangle",
|
|
{ fill: "white" },
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock, { margin: 5 },
|
|
new go.Binding("text", "key")),
|
|
{
|
|
toolTip: // define a tooltip for each node
|
|
$(go.Adornment, "Spot", // that has several labels around it
|
|
{ background: "transparent" }, // avoid hiding tooltip when mouse moves
|
|
$(go.Placeholder, { padding: 5 }),
|
|
$(go.TextBlock,
|
|
{ alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, stroke: "red" },
|
|
new go.Binding("text", "key", function(s) { return "key: " + s; })),
|
|
$(go.TextBlock, "Bottom",
|
|
{ alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, stroke: "red" },
|
|
new go.Binding("text", "color", function(s) { return "color: " + s; }))
|
|
) // end Adornment
|
|
}
|
|
);
|
|
diagram.initialContentAlignment = go.Spot.Center;
|
|
var nodeDataArray = [
|
|
{ key: "Alpha", color: "lightyellow" },
|
|
{ key: "Beta", color: "orange" }
|
|
];
|
|
var linkDataArray = [
|
|
{ from: "Alpha", to: "Beta" }
|
|
];
|
|
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
|
|
</pre>
|
|
<script>goCode("tooltipsplaceholder", 350, 200)</script>
|
|
<p>
|
|
Note how the <a>Adornment</a> implementing the tooltip uses a "transparent" background
|
|
so that the tooltip is not automatically removed when the mouse moves.
|
|
</p>
|
|
|
|
<h2 id="HTMLTooltips">HTML Tooltips</h2>
|
|
<p>
|
|
It is possible to define custom tooltips using HTML instead of <a>Adornment</a>s using the <a>HTMLInfo</a> class.
|
|
The <a href="../samples/dataVisualization.html">Data Visualization sample</a> shows such tooltips.
|
|
See <a href="HTMLInteraction.html">HTML Interaction</a> for more discussion.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|