Hello I am a newbie of gojs I am having trouble with tooltip i have set nodedataarray with some value I can see that on console with diagram.model.nodeDataArray and value is there but on the tooltip side cannot see same value I am getting different value until i refresh page as I understand gojs changing values on instantly
You are missing the second string argument to the Binding constructor – the name of the source property.
I changed with datasource but still is taking the same value until i refresh I have seen nodedataarray but still same
There are lots of samples that have tooltips that depend on their Part’s data. How is yours different?
GoJS Tooltips -- Northwoods Software
Hi Walter thank you for your quick response i guess our main problem with data here is mark with s or value what we are rendering actually user actually changing somewhere else in the software i did with model.set(… and i can see that in the diagram reference changing also (nodedataarray) i dont really understand why is keeping old value on the tooltip until refresh browser thanks again for your help
Each GraphObject.toolTip is a single Adornment that is shown anew for whatever GraphObject shares that tooltip, which is likely many GraphObjects because they are copied from the template. This works because only one tooltip can be shown at a time.
That means that each time the ToolManager shows a tooltip Adornment, it sets its Part.data to the data object of the Part. And setting the data will cause all Bindings to be evaluated again. After the tooltip is hidden, it retains whatever state it had when it was last visible.
Are you showing a tooltip programmatically? If the tooltip isn’t being shown in the normal manner, perhaps its data is out-of-date, causing it to show old data.
Here’s a complete sample demonstrating how a tooltip will update via a data Binding as the model data is changed asynchronously:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
Show a tooltip on a node. It should update along with the node's text.
<script src="https://unpkg.com/gojs"></script>
<script id="code">
function init() {
const $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
toolTip:
$("ToolTip",
$(go.TextBlock,
new go.Binding("text")))
},
$(go.Shape,
{ fill: "white", portId: "" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8, editable: true },
new go.Binding("text").makeTwoWay())
);
myDiagram.model = $(go.GraphLinksModel,
{
nodeDataArray:
[
{ key: 1, text: "Alpha:", color: "lightblue" },
{ key: 2, text: "Beta:", color: "orange" },
{ key: 3, text: "Gamma:", color: "lightgreen" },
{ key: 4, text: "Delta:", color: "pink" }
],
linkDataArray:
[
{ from: 1, to: 2 },
{ from: 1, to: 3 }
]
});
function loop() {
myDiagram.model.commit(m => {
m.nodeDataArray.forEach(d => {
const idx = d.text.indexOf(":");
m.set(d, "text", d.text.substring(0, idx) + ": " + new Date().toLocaleString());
});
});
setTimeout(loop, 1000)
}
loop();
}
window.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
What is that middle screenshot showing? How does it interact with the model?
Hi middle screen for input we bind singleclick and we are setting value and we should suppose to see on tooltip value as as third screen
What we are setting here i am seeing somewhere else and also nodedataarray but not on tooltip
Is that tooltip set on or in the Panel.itemTemplate?
Is the Panel.itemArray bound to input_vars?
I suspect the problem is that the GoJS model doesn’t know that the item has changed, because you directly set the value property and didn’t call Model.set on it.
