Tool tip in EJ2 TypeScript Diagram control
26 Jun 202324 minutes to read
In Graphical User Interface (GUI), the tooltip is a message that is displayed when mouse hovers over an element. The diagram provides tooltip support while dragging, resizing, rotating a node, and when the mouse hovers any diagram element.
Default tooltip
By default, diagram displays a tooltip to provide the size, position, and angle related information while dragging, resizing, and rotating. The following images illustrate how the diagram displays the node information during an interaction.
Drag | Resize | Rotate |
---|---|---|
![]() |
![]() |
![]() |
Common tooltip for all nodes and connectors
The diagram provides support to show tooltip when the mouse hovers over any node/connector. To show tooltip on mouse over, the tooltip
property of diagram model needs to be set with the tooltip content
and position
as shown in the following example.
import {
Diagram,
NodeModel,
DiagramConstraints,
NodeConstraints
} from '@syncfusion/ej2-diagrams';
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
//Initializes the diagram component
let diagram: Diagram = new Diagram({
width: '100%',
height: '350px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
//Defines nodes
nodes: [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
}],
//Defines mouse over tooltip
tooltip: {
content: 'Nodes',
position: 'TopLeft'
}
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Disable tooltip at runtime
The tooltip on mouse over can be disabled by assigning the tooltip
property as null
. The following code example illustrates how to disable the mouse over tooltip at runtime.
//Initializes the diagram component
let diagram: Diagram = new Diagram({
width: '100%', height: '350px',
//Disables mouse over tooltip at runtime
tooltip: null
}, '#element');
Tooltip for a specific node/connector
The tooltip can be customized for each node and connector. Remove the InheritTooltip option from the constraints
of that node/connector. The following code example illustrates how to customize the tooltip for individual elements.
import {
Diagram,
NodeModel,
DiagramConstraints,
NodeConstraints
} from '@syncfusion/ej2-diagrams';
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
//Initializes the diagram component
let diagram: Diagram = new Diagram({
width: '100%',
height: '350px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
//Defines nodes
nodes: [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the tooltip
content: 'Node1',
//Sets the position of the tooltip
position: 'BottomRight',
//Sets the tooltip position relative to the node
relativeMode: 'Object'
},
}]
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Tooltip for Ports
The tooltip feature has been implemented to support Ports, providing the ability to display information or descriptions when the mouse hovers over them.
To display tooltips on mouseover, set the desired tooltip content
by utilizing the tooltip
property.
Tooltips for Ports can be enabled or disabled using the PortConstraints
Tooltip property.
let ports: [{
offset: {x: 1,y: 0.5},
tooltip: {content: 'Port Tootip'},
//enable Port Tooltip Constraints
constraints: PortConstraints.Default | PortConstraints.ToolTip,
//disable Port Tooltip Constraints
constraints: PortConstraints.Default ~& PortConstraints.ToolTip
}]
Dynamic modification of tooltip content is supported, allowing you to change the displayed tooltip content during runtime.
{
//change tooltip content at run time
diagram.nodes[0].ports[0].tooltip.content = 'New Tooltip Content';
diagram.databind;
}
The following image illustrates how the diagram displays tooltips during an interaction with ports:
Here, the code provided below demonstrates the port tooltip Interaction.
import {
Diagram,
NodeModel,
PortVisibility,
PortConstraints
} from '@syncfusion/ej2-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel = {
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Initialize port collection
ports: [{
// Sets the position for the port
offset: {
x: 0.5,
y: 0.5
},
visibility: PortVisibility.Visible,
tooltip: {
content: 'Port Tooltip',
},
constraints: PortConstraints.Default | PortConstraints.Tooltip
}]
};
// initialize diagram component
let diagram: Diagram = new Diagram({
width: '100%',
height: '600px',
// Add node
nodes: [node]
});
// render initialized diagram
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Tooltip template content
Any text or image can be added to the tooltip, by default. To customize the tooltip layout or to create your own visualized element on the tooltip, template can be used.
The following code example illustrates how to add formatted HTML content to the tooltip.
import {
Diagram,
NodeModel,
DiagramConstraints,
NodeConstraints
} from '@syncfusion/ej2-diagrams';
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
//Initializes the diagram component
let diagram: Diagram = new Diagram({
width: '100%',
height: '350px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
//Defines nodes
nodes: [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the tooltip
content: getContent(),
//Sets the position of the tooltip
position: 'TopLeft',
//Sets the tooltip position relative to the node
relativeMode: 'Object'
}
}]
}, '#element');
function getContent(): HTMLElement {
let tooltipContent: HTMLElement = document.createElement('div');
tooltipContent.innerHTML = '<div style="background-color: #f4f4f4; color: black; border-width:1px;border-style: solid;border-color: #d3d3d3; border-radius: 8px;white-space: nowrap;"> <span style="margin: 10px;"> Tooltip !!! </span> </div>';
return tooltipContent;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Tooltip alignments
Tooltip relative to object
The diagram provides support to show tooltip around the node/connector that is hovered by the mouse. The tooltip can be aligned by using the position
property of the tooltip. The relativeMode
property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position.
The following code example illustrates how to position the tooltip around object.
import {
Diagram,
NodeModel,
DiagramConstraints,
NodeConstraints
} from '@syncfusion/ej2-diagrams';
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
//Initializes the diagram component
let diagram: Diagram = new Diagram({
width: '100%',
height: '350px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
//Defines nodes
nodes: [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: (NodeConstraints.Default & ~NodeConstraints.InheritTooltip) | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
//Sets the alignment properties
position: 'BottomRight',
//Sets to show tooltip around the element
relativeMode: 'Object',
},
}],
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Tooltip relative to mouse position
To display the tooltip at mouse position, need to set mouse option to the relativeMode
property of the tooltip.
The following code example illustrates how to show tooltip at mouse position.
import {
Diagram,
NodeModel,
DiagramConstraints,
NodeConstraints
} from '@syncfusion/ej2-diagrams';
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
//Initializes the diagram component
let diagram: Diagram = new Diagram({
width: '100%',
height: '350px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
//Defines nodes
nodes: [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
//Sets to show tooltip at mouse position
relativeMode: 'Mouse',
},
}],
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Tooltip animation
To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the animation
property. The animation property also allows you to set delay, duration, and various other effects of your choice.
import {
Diagram,
NodeModel,
DiagramConstraints,
NodeConstraints
} from '@syncfusion/ej2-diagrams';
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
//Initializes the Diagram component
let diagram: Diagram = new Diagram({
width: '100%',
height: '350px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
//Defines nodes
nodes: [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
animation: {
//Animation settings to be applied on the tooltip, while it is being shown over the target.
open: {
//Animation effect on the tooltip is applied during open and close actions.
effect: 'ZoomIn',
//Duration of the animation that is completed per animation cycle.
duration: 1000,
//Indicating the waiting time before animation begins.
delay: 0
},
//Animation settings to be applied on the tooltip, when it is closed.
close: {
effect: 'ZoomOut',
duration: 500,
delay: 0
}
}
},
}]
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>