Tooltip in Vue Diagram component

20 Sep 202424 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
ToolTip During Drag ToolTip During Resize ToolTip During 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.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'>
        </ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}];

const width = "100%";
const height = "350px";
const constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip;
const tooltip = {
    content: 'Nodes',
    position: 'TopLeft'
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}]

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
            nodes: nodes,
            tooltip: {
                content: 'Nodes',
                position: 'TopLeft'
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

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.

 export default {
        name: 'app'
        data () {
            return {
                width: "100%",
                height: "350px",
                tooltip: null
            }
        }
    }

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.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'>
        </ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}];

const width = "100%";
const height = "350px";
const constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip;
//Defines mouse over tooltip for a node
const 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'
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'>
        </ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}]

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
            nodes: nodes,
            //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'
            },
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

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:

Tooltip

Here, the code provided below demonstrates the port tooltip Interaction.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, PortVisibility, PortConstraints } from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
    id: "node1",
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Initialize port collection
    ports: [{
        // Sets the position for the port
        offset: {
            x: 0.5,
            y: 0.5
        },
        visibility: PortVisibility.Visible,
        shape: 'Circle',
        tooltip: { content: 'Port Tootip', relativeMode: 'Object', position: 'TopRight' },
        constraints: PortConstraints.Default | PortConstraints.ToolTip
    }]
}]

const width = "100%";
const height = "350px";

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, PortVisibility, PortConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Initialize port collection
    ports: [{
        // Sets the position for the port
        offset: {
            x: 0.5,
            y: 0.5
        },
        visibility: PortVisibility.Visible,
        shape: 'Circle',
        tooltip: { content: 'Port Tootip', relativeMode: 'Object', position: 'TopRight' },
        constraints: PortConstraints.Default | PortConstraints.ToolTip
    }]
}]

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

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.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'>
        </ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}];

function getContent() {
    let tooltipContent = 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;
}
const width = "100%";
const height = "350px";
const constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip;
//Defines mouse over tooltip for a node
const 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'
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}]
function getContent() {
    let tooltipContent = 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;
}

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
            nodes: nodes,
            //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'
            },
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

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.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}]

const width = "100%";
const height = "350px";
const constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip;
//Defines mouse over tooltip for a node
const tooltip = {
    content: 'Node1',
    //Sets the alignment properties
    position: 'BottomRight',
    //Sets to show tooltip around the element
    relativeMode: 'Object',
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}]

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
            nodes: nodes,
            //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',
            },
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

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.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}]

const width = "100%";
const height = "350px";
const constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip;
//Defines mouse over tooltip for a node
const tooltip = {
    content: 'Node1',
    //Sets to show tooltip at mouse position
    relativeMode: 'Mouse',
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}]

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
            nodes: nodes,
            //Defines mouse over tooltip for a node
            tooltip: {
                content: 'Node1',
                //Sets to show tooltip at mouse position
                relativeMode: 'Mouse',
            },
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

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.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}]

const width = "100%";
const height = "350px";
const constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip;
//Defines mouse over tooltip for a node
const 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
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :tooltip='tooltip'
            :constraints='constraints'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: "node1",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    annotations: [{
        content: "start"
    }]
}]

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
            nodes: nodes,
            //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
                    }
                }
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Tooltip for Annotation

Tooltips can be added to annotations to display additional information on mouseover.
To display tooltips on mouseover, set the desired tooltip text to the tooltip property of the annotation.
Tooltips for Annotations can be enabled or disabled by setting the AnnotationConstraints property as Tooltip.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' ></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram,AnnotationConstraints} from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 250,
    offsetY: 150,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Sets the Annotation for the Node
    annotations: [{
        id: 'label1',
                content: 'Rectangle',
                tooltip: {
                    content: 'Rectangle',
                    position: 'TopRight',
                    relativeMode: 'Object',
                },
                constraints: AnnotationConstraints.Tooltip,
    }]
}];



const width = "100%";
const height = "350px";

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' ></ejs-diagram>
    </div>
</template>
<script>

import { DiagramComponent,AnnotationConstraints } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
     id: 'node1',
    // Position of the node
    offsetX: 250,
    offsetY: 150,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Sets the Annotation for the Node
    annotations: [{
        id: 'label1',
        content: 'Rectangle',
        tooltip: {
            content: 'Rectangle',
            position: 'TopRight',
            relativeMode: 'Object',
        },
        constraints: AnnotationConstraints.Tooltip,
    }]
}];



export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
           
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>