How to add or show tooltip in diagram?
This article explains how to add or show a tooltip in a diagram. The JavaScript Diagram provides several features such as adding nodes, connectors, and more. The tooltip gives extra information about the object displayed whenever the user hovers over it. The tooltip can be set for the diagram or individual objects such as nodes, connectors, and more to add extra information. The following code sample serves as a reference for adding a tooltip to the diagram and the node.
let node: NodeModel[] =[{
id: "node1",
width: 100,height: 100,
offsetX: 100,offsetY: 100,
constraints: NodeConstraints.Default | NodeConstraints.InheritTooltip,
},
{
id: "node21",
width: 100,height: 100,
offsetX: 300,offsetY: 250,
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node2',
//Sets the alignment properties
position: 'BottomRight',
//Sets to show tooltip around the element
relativeMode: 'Object',
},
},
];
//Initializes the diagram component
let diagram: Diagram = new Diagram({
width: '650px',
height: '350px',
//Defines nodes
constraints:DiagramConstraints.Default | DiagramConstraints.Tooltip,
nodes: node,
tooltip: {
content: 'Diagram1',
//Sets the alignment properties
position: 'TopCenter',
//Sets to show tooltip around the element
relativeMode: 'Object'
}
}, '#diagram');The above code sets the position and relative mode for the diagram and the node. Similarly, the tooltip can be added to the connector. The height and width of the tooltip can also be set in the diagram. The tooltip can be customized according to the user's preference. The InheritTooltip is used to inherit the tooltip property of the diagram. The position, relative mode, animation, and more can be configured for the tooltip. The information to be displayed is always set in the content of the tooltip.
Refer to the working sample for additional details and implementation: Sample
Conclusion
We hope you enjoyed learning about how to add or show a tooltip in a diagram.
You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
