Tooltip.cshtml

@using Syncfusion.EJ2.Diagrams;

@section ControlsSection{
    <div class="col-lg-8 control-section">
        <div id="tooltipDiagramSection" class="content-wrapper" style="width: 100%">
            <ejs-diagram id="diagram" width="100%" height="645px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults" created="created">
                <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
                <e-diagram-tooltip relativeMode="Object" animation="@ViewBag.animation" position="@ViewBag.position"></e-diagram-tooltip>
            </ejs-diagram>
        </div>
    </div>
    <div id="tooltipPropertySection" class="col-lg-4 property-section">
        <table id="property" title="Properties">
            <tr>
                <td>
                    <div>
                        Relative Mode
                    </div>
                </td>
                <td>
                    <div>
                        <ejs-dropdownlist id="mode" index="0" dataSource="@ViewBag.modeValue" popupWidth="150" width="100%" placeholder="select a relative mode" change="relativeModeChange">
                            <e-dropdownlist-fields text="Text" value="Type"></e-dropdownlist-fields>
                        </ejs-dropdownlist>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        Position
                    </div>
                </td>
                <td>
                    <div>
                        <ejs-dropdownlist id="position" index="0" dataSource="@ViewBag.positionValue" popupWidth='150' width='150px' placeholder='select a position' change="positionChange">
                            <e-dropdownlist-fields text="Text" value="Type"></e-dropdownlist-fields>
                        </ejs-dropdownlist>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        Animation
                    </div>
                </td>
                <td>
                    <div>
                        <ejs-numerictextbox id="duration" value="1000" min="100" max="2000" step="100" change="animationChange"></ejs-numerictextbox>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        Effect
                    </div>
                </td>
                <td>
                    <div>
                        <ejs-dropdownlist id="effect" index="0" dataSource="@ViewBag.effectValue" popupWidth='150' width='100%' placeholder='select a effect type' change="effectChange">
                            <e-dropdownlist-fields text="Text" value="Type"></e-dropdownlist-fields>
                        </ejs-dropdownlist>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <style>

        #tooltipDiagramSection .image-pattern-style {
            background-color: white;
            background-size: contain;
            background-repeat: no-repeat;
            height: 75px;
            width: calc((100% - 12px) / 3);
            cursor: pointer;
            border: 1px solid #D5D5D5;
            background-position: center;
            float: left;
        }

            #tooltipDiagramSection .image-pattern-style:hover {
                border-color: gray;
                border-width: 2px;
            }

        #tooltipDiagramSection .row {
            margin-left: 0px;
            margin-right: 0px;
        }

        #tooltipDiagramSection .row-header {
            font-size: 13px;
            font-weight: 500;
        }

        #tooltipDiagramSection .e-selected-style {
            border-color: #006CE6;
            border-width: 2px;
        }

        #tooltipDiagramSection .e-checkbox-wrapper .e-label {
            font-size: 12px;
        }

        #tooltipPropertySection .property-panel-header {
            margin-left: 10px;
        }
    </style>

    <script>
        function getNodeDefaults(obj) {
            obj.offsetX += 0.5;
            obj.offsetY += 0.5;
            obj.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip;
            obj.style = { strokeWidth: 2 };
            return obj;
        }

        function getConnectorDefaults(connector, diagram) {
            connector.type = 'Orthogonal';
            connector.style = { strokeWidth: 2 };
            return connector;
        }

        function relativeModeChange(args) {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            if (args.value === 'Mouse') {
                diagram.tooltip.relativeMode = 'Mouse';
            } else {
                diagram.tooltip.relativeMode = 'Object';
            }
            diagram.dataBind();
        }

        function positionChange(args) {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            var nodes = diagram.nodes;
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].tooltip) {
                    nodes[i].tooltip.position = args.value;
                    diagram.dataBind();
                }
            }
        }

        function effectChange(args) {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.tooltip.animation.open.effect = args.value;
            diagram.tooltip.animation.close.effect = args.value;
            diagram.dataBind();
        }

        function htmlChange(args) {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            var tooltipContent = document.createElement('div');
            var Description = args.value.toString();
            tooltipContent.innerHTML = '<div style="background-color: #f4f4f4; color: black; border-width:1px;border-style: solid;border-color: #d3d3d3; border-radius: 8px;corner-radius:2px;white-space: nowrap;"> <span style="margin: 10px;"> "tooltipContent" </span>';
            diagram.tooltip.content = tooltipContent;
            diagram.dataBind();
        }

        function textChange(args) {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.tooltip.content = args.value.toString();
            diagram.dataBind();
        }

        function contentChange(args) {
            var HtmlBlock = document.getElementById('htmlContentDiv')
            var textBlock = document.getElementById('textContentDiv')
            if (args.value === 'HTML Element') {
                textBlock.style.display = 'block';
                HtmlBlock.style.display = 'none';
            } else {
                HtmlBlock.style.display = 'block';
                textBlock.style.display = 'none';
            }
        }

        function animationChange(args) {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.tooltip.animation.close.duration = args.value;
            diagram.tooltip.animation.open.duration = args.value;
            diagram.dataBind();
        }
        function created() {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.fitToPage({ mode: 'Width' });
        }
    </script>

}
@section ActionDescription{
    <p>
        This sample demonstrates how to add the extra information to the nodes and how to show the information through
        the common graphical user interface element.
    </p>
}
@section Meta{
    <meta name="description" content=" This sample demonstrates how to add the extra information to the nodes and how to show the information through
        the common graphical user interface element." />
}

@section Description{
    <p>
        Using diagram’s <code>tooltip</code> we can define the tooltip for the diagram nodes as well as connector. We can control the <code>animation</code>,
        <code>position</code>, <code>effects</code> of the tooltip using <code>tooltip</code> property of the diagram. Also, we can define the custom tooltip
        as either text or HTML element using <code>content</code> property of the tooltip. We can control the different tooltip settings
        to each connector and node.
    </p>
}