DiagramTooltip API in JavaScript Diagram API control

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’

openOn

string

Sets how to open the Tooltip

Defaults to ‘Auto’

position

Position

Defines the position of the Tooltip

Defaults to ‘TopLeft’

relativeMode

string

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’