DiagramTooltip

23 Sep 20251 minute to read

Defines the tooltip that should be shown when the mouse hovers over node.
An object that defines the description, appearance and alignments of tooltip

Properties

animation AnimationModel

Allows to set the same or different animation option for the Tooltip, when it is opened or closed.

<div id='diagram'></div>

let diagram: Diagram = new Diagram({
...
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: { content: getcontent(), position: 'TopLeft', relativeMode: 'Object',
animation: { open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 } } },
...
});
diagram.appendTo('#diagram');
function getcontent(): => {
...
}

Defaults to { open: { effect: ‘FadeIn’, duration: 150, delay: 0 }, close: { effect: ‘FadeOut’, duration: 150, delay: 0 } }

content string|HTMLElement

Defines the content of the Tooltip

Defaults to ’’

height number|string

Sets the height of the Tooltip

Defaults to ‘auto’

isSticky boolean

Specifies whether the tooltip remains visible even when the mouse moves away from the target element.
If set to true, the tooltip is always visible; otherwise, it is hidden when the mouse moves away.
The default value is false.

Defaults to false

openOn TooltipMode

Sets how to open the Tooltip

Defaults to ‘Auto’

position Position

Defines the position of the Tooltip

Defaults to ‘TopLeft’

relativeMode TooltipRelativeMode

Defines the relative mode of the Tooltip

• Object - sets the tooltip position relative to the node
• Mouse - sets the tooltip position relative to the mouse

Defaults to ‘Mouse’

showTipPointer boolean

Defines if the Tooltip has tip pointer or not

Defaults to true

width number|string

Sets the width of the Tooltip

Defaults to ‘auto’