Search results

DiagramTooltip API in Angular Diagram API component

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’