Tooltip in React Diagram

In Graphical User Interface (GUI), a tooltip is a message that appears when the mouse hovers over an element. Tooltips enhance user experience by providing contextual information, guidance, and feedback without cluttering the interface. The React Diagram component provides comprehensive tooltip support while dragging, resizing, rotating nodes, and when the mouse hovers over any diagram element.

By default, the diagram displays a tooltip showing size, position, and angle information while dragging, resizing, or rotating a node. This provides real-time feedback during interactive operations:

Drag: Shows current X and Y coordinates of the node.
Resize: Displays current width and height dimensions.
Rotate: Indicates the current rotation angle in degrees.

The following images illustrate how the diagram displays node information during these interactions.

Drag	Resize	Rotate

The default tooltip that appears while interacting with nodes can be disabled by removing the tooltip constraints from the selectorConstraints of the selectedItems property of the diagram.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SelectorConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Default tooltip disabled',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white',
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7',
        },
       
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} 
    selectedItems=
    //Defines nodes
    nodes={node} 
    //Defines mouse over tooltip
    tooltip=<h1 id="tools-in-aspnet-core-diagram">Tools in ASP.NET Core Diagram</h1>

<h2 id="drawing-tools">Drawing tools</h2>

<p>Drawing tool allows to draw any kind of node or connector during runtime by clicking and dragging on the diagram page.</p>

<h2 id="shapes">Shapes</h2>

<p>To draw a shape, set the JSON of that shape to the drawType property of the diagram and activate the drawing tool by using the <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> property.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">drawingshape</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Basic'</span><span class="p">,</span> <span class="nx">shape</span><span class="o">:</span> <span class="s1">'Rectangle'</span> <span class="p">};</span>
        <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="nx">drawingshape</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    <span class="p">}</span></code></pre></div>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s2">"Path"</span><span class="p">,</span>
            <span class="nx">style</span><span class="o">:</span> <span class="p">{</span> <span class="nx">fill</span><span class="o">:</span> <span class="s2">"#fbe172"</span> <span class="p">},</span>
            <span class="nx">annotations</span><span class="o">:</span> <span class="p">[{</span>
                <span class="nx">content</span><span class="o">:</span> <span class="s2">"Path"</span>
            <span class="p">}],</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">type</span><span class="o">:</span><span class="s1">'Path'</span><span class="p">,</span>
                <span class="nx">data</span><span class="o">:</span> <span class="s1">'M13.560 67.524 L 21.941 41.731 L 0.000 25.790 L 27.120 25.790 L 35.501 0.000 L 43.882 25.790 L 71.000 25.790 L 49.061 41.731 L 57.441 67.524 L 35.501 51.583 z'</span>
            <span class="p">}</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    <span class="p">}</span></code></pre></div>

<h2 id="connectors">Connectors</h2>

<p>To draw connectors, set the JSON of the connector to the drawType property. The drawing <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> can be activated by using the tool property.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"polyline"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="text">Text</h2>

<p>ASP.NET Core Diagram allows to create a textNode, when you click on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">shape</span><span class="o">:</span> <span class="p">{</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Text'</span><span class="p">,</span>
        <span class="p">}</span>
    <span class="p">};</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
    <span class="c1">//To draw an object once, activate draw once</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<p>Once you activate the TextTool, perform label editing of a node/connector.</p>

<h2 id="polygon-shape">Polygon shape</h2>

<p>ASP.NET Core Diagram allows to create the polygon shape by clicking and moving the mouse at runtime on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">drawingshape</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Basic'</span><span class="p">,</span> <span class="nx">shape</span><span class="o">:</span> <span class="s1">'Polygon'</span> <span class="p">};</span>
        <span class="c1">//JSON to create a polygon</span>
        <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="nx">drawingshape</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="polyline-connector">Polyline Connector</h2>

<p>ASP.NET Core Diagram allows to create the polyline segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">connector</span> <span class="o">=</span>  <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Polyline'</span><span class="p">};</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connector</span><span class="p">;</span>
    <span class="c1">//To draw an object once, activate draw once</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="tool-selection">Tool selection</h2>

<p>There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows.</p>

<ul>
  <li>Draw selection rectangle: MultipleSelect tool</li>
  <li>Pan the diagram: Zoom pan</li>
  <li>Draw nodes/connectors: DrawOnce/DrawOnce</li>
</ul>

<p>As all the three behaviors are completely different, you can achieve only one behavior at a time, based on the tool that you choose. When more than one of those tools are applied, a tool is activated based on the precedence given in the following table.</p>

<table>
  <thead>
    <tr>
      <th>Precedence</th>
      <th>Tools</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
      <td>ContinuesDraw</td>
      <td>Allows you to draw the nodes or connectors continuously. Once it is activated, you cannot perform any other interaction in the diagram.</td>
    </tr>
    <tr>
      <td>2nd</td>
      <td>DrawOnce</td>
      <td>Allows you to draw a single node or connector. Once you complete the DrawOnce action, SingleSelect, and MultipleSelect tools are automatically enabled.</td>
    </tr>
    <tr>
      <td>3rd</td>
      <td>ZoomPan</td>
      <td>Allows you to pan the diagram. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.</td>
    </tr>
    <tr>
      <td>4th</td>
      <td>MultipleSelect</td>
      <td>Allows you to select multiple nodes and connectors. When you enable both the MultipleSelect and ZoomPan tools, cursor hovers the diagram. When panning is enabled, you cannot select multiple nodes.</td>
    </tr>
    <tr>
      <td>5th</td>
      <td>SingleSelect</td>
      <td>Allows you to select individual nodes or connectors.</td>
    </tr>
    <tr>
      <td>6th</td>
      <td>None</td>
      <td>Disables all tools.</td>
    </tr>
  </tbody>
</table>

<p>Set the desired <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> to the tool property of the diagram model.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"Straight"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span> <span class="o">|</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">ZoomPan</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="events">Events</h2>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"Straight"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    
<span class="p">}</span></code></pre></div>

<h2 id="freehand-drawing">Freehand Drawing</h2>

<p>Diagram has support for free-hand drawing to draw anything on the diagram page independently. Free-hand drawing will be enabled by using the drawingObject property and setting its value to Freehand.</p>

<p>The following code illustrates how to draw a freehand drawing.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Freehand'</span><span class="p">,</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    
<span class="p">}</span></code></pre></div>
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SelectorConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Default tooltip disabled',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white',
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7',
        },
       
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} 
    selectedItems=
    //Defines nodes
    nodes={node} 
    //Defines mouse over tooltip
    tooltip=<h1 id="tools-in-aspnet-core-diagram">Tools in ASP.NET Core Diagram</h1>

<h2 id="drawing-tools">Drawing tools</h2>

<p>Drawing tool allows to draw any kind of node or connector during runtime by clicking and dragging on the diagram page.</p>

<h2 id="shapes">Shapes</h2>

<p>To draw a shape, set the JSON of that shape to the drawType property of the diagram and activate the drawing tool by using the <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> property.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">drawingshape</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Basic'</span><span class="p">,</span> <span class="nx">shape</span><span class="o">:</span> <span class="s1">'Rectangle'</span> <span class="p">};</span>
        <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="nx">drawingshape</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    <span class="p">}</span></code></pre></div>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s2">"Path"</span><span class="p">,</span>
            <span class="nx">style</span><span class="o">:</span> <span class="p">{</span> <span class="nx">fill</span><span class="o">:</span> <span class="s2">"#fbe172"</span> <span class="p">},</span>
            <span class="nx">annotations</span><span class="o">:</span> <span class="p">[{</span>
                <span class="nx">content</span><span class="o">:</span> <span class="s2">"Path"</span>
            <span class="p">}],</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">type</span><span class="o">:</span><span class="s1">'Path'</span><span class="p">,</span>
                <span class="nx">data</span><span class="o">:</span> <span class="s1">'M13.560 67.524 L 21.941 41.731 L 0.000 25.790 L 27.120 25.790 L 35.501 0.000 L 43.882 25.790 L 71.000 25.790 L 49.061 41.731 L 57.441 67.524 L 35.501 51.583 z'</span>
            <span class="p">}</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    <span class="p">}</span></code></pre></div>

<h2 id="connectors">Connectors</h2>

<p>To draw connectors, set the JSON of the connector to the drawType property. The drawing <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> can be activated by using the tool property.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"polyline"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="text">Text</h2>

<p>ASP.NET Core Diagram allows to create a textNode, when you click on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">shape</span><span class="o">:</span> <span class="p">{</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Text'</span><span class="p">,</span>
        <span class="p">}</span>
    <span class="p">};</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
    <span class="c1">//To draw an object once, activate draw once</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<p>Once you activate the TextTool, perform label editing of a node/connector.</p>

<h2 id="polygon-shape">Polygon shape</h2>

<p>ASP.NET Core Diagram allows to create the polygon shape by clicking and moving the mouse at runtime on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">drawingshape</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Basic'</span><span class="p">,</span> <span class="nx">shape</span><span class="o">:</span> <span class="s1">'Polygon'</span> <span class="p">};</span>
        <span class="c1">//JSON to create a polygon</span>
        <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="nx">drawingshape</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="polyline-connector">Polyline Connector</h2>

<p>ASP.NET Core Diagram allows to create the polyline segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">connector</span> <span class="o">=</span>  <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Polyline'</span><span class="p">};</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connector</span><span class="p">;</span>
    <span class="c1">//To draw an object once, activate draw once</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="tool-selection">Tool selection</h2>

<p>There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows.</p>

<ul>
  <li>Draw selection rectangle: MultipleSelect tool</li>
  <li>Pan the diagram: Zoom pan</li>
  <li>Draw nodes/connectors: DrawOnce/DrawOnce</li>
</ul>

<p>As all the three behaviors are completely different, you can achieve only one behavior at a time, based on the tool that you choose. When more than one of those tools are applied, a tool is activated based on the precedence given in the following table.</p>

<table>
  <thead>
    <tr>
      <th>Precedence</th>
      <th>Tools</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
      <td>ContinuesDraw</td>
      <td>Allows you to draw the nodes or connectors continuously. Once it is activated, you cannot perform any other interaction in the diagram.</td>
    </tr>
    <tr>
      <td>2nd</td>
      <td>DrawOnce</td>
      <td>Allows you to draw a single node or connector. Once you complete the DrawOnce action, SingleSelect, and MultipleSelect tools are automatically enabled.</td>
    </tr>
    <tr>
      <td>3rd</td>
      <td>ZoomPan</td>
      <td>Allows you to pan the diagram. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.</td>
    </tr>
    <tr>
      <td>4th</td>
      <td>MultipleSelect</td>
      <td>Allows you to select multiple nodes and connectors. When you enable both the MultipleSelect and ZoomPan tools, cursor hovers the diagram. When panning is enabled, you cannot select multiple nodes.</td>
    </tr>
    <tr>
      <td>5th</td>
      <td>SingleSelect</td>
      <td>Allows you to select individual nodes or connectors.</td>
    </tr>
    <tr>
      <td>6th</td>
      <td>None</td>
      <td>Disables all tools.</td>
    </tr>
  </tbody>
</table>

<p>Set the desired <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> to the tool property of the diagram model.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"Straight"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span> <span class="o">|</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">ZoomPan</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="events">Events</h2>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"Straight"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    
<span class="p">}</span></code></pre></div>

<h2 id="freehand-drawing">Freehand Drawing</h2>

<p>Diagram has support for free-hand drawing to draw anything on the diagram page independently. Free-hand drawing will be enabled by using the drawingObject property and setting its value to Freehand.</p>

<p>The following code illustrates how to draw a freehand drawing.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Freehand'</span><span class="p">,</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    
<span class="p">}</span></code></pre></div>
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

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.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //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'
        },
    }];
let connector = [{
    id: 'connector1',
    sourcePoint: { x: 300, y: 100 },
    targetPoint: { x: 400, y: 250 },
    tooltip: { content: 'connector' },
    constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip, 
}]
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node} connectors={connector}
    />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,ConnectorConstraints,NodeModel, } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //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'
        },
    }];
let connector = [{
    id: 'connector1',
    sourcePoint: { x: 300, y: 100 },
    targetPoint: { x: 400, y: 250 },
    tooltip: { content: 'connector' },
    constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip, 
}]
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node} connectors={connector}
    />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

The diagram supports inheriting the diagram tooltip when the mouse hovers over any node or connector. To show a tooltip on mouse over, set the diagram’s tooltip property with the tooltip content and position. Ensure that the nodes and connectors have their constraints set to InheritTooltip, as shown in the following example.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.InheritTooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            //Sets the content of the Tooltip
            content: 'Node1',
        },
    }];
let connector = [{
    id: 'connector1',
    sourcePoint: { x: 300, y: 100 },
    targetPoint: { x: 400, y: 250 },
    tooltip: { content: 'connector' },
    constraints: ConnectorConstraints.Default | ConnectorConstraints.InheritTooltip, 
}]
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node} connectors={connector}
     //Defines mouse over tooltip for a node
     tooltip=<h1 id="tools-in-aspnet-core-diagram">Tools in ASP.NET Core Diagram</h1>

<h2 id="drawing-tools">Drawing tools</h2>

<p>Drawing tool allows to draw any kind of node or connector during runtime by clicking and dragging on the diagram page.</p>

<h2 id="shapes">Shapes</h2>

<p>To draw a shape, set the JSON of that shape to the drawType property of the diagram and activate the drawing tool by using the <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> property.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">drawingshape</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Basic'</span><span class="p">,</span> <span class="nx">shape</span><span class="o">:</span> <span class="s1">'Rectangle'</span> <span class="p">};</span>
        <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="nx">drawingshape</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    <span class="p">}</span></code></pre></div>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s2">"Path"</span><span class="p">,</span>
            <span class="nx">style</span><span class="o">:</span> <span class="p">{</span> <span class="nx">fill</span><span class="o">:</span> <span class="s2">"#fbe172"</span> <span class="p">},</span>
            <span class="nx">annotations</span><span class="o">:</span> <span class="p">[{</span>
                <span class="nx">content</span><span class="o">:</span> <span class="s2">"Path"</span>
            <span class="p">}],</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">type</span><span class="o">:</span><span class="s1">'Path'</span><span class="p">,</span>
                <span class="nx">data</span><span class="o">:</span> <span class="s1">'M13.560 67.524 L 21.941 41.731 L 0.000 25.790 L 27.120 25.790 L 35.501 0.000 L 43.882 25.790 L 71.000 25.790 L 49.061 41.731 L 57.441 67.524 L 35.501 51.583 z'</span>
            <span class="p">}</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    <span class="p">}</span></code></pre></div>

<h2 id="connectors">Connectors</h2>

<p>To draw connectors, set the JSON of the connector to the drawType property. The drawing <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> can be activated by using the tool property.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"polyline"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="text">Text</h2>

<p>ASP.NET Core Diagram allows to create a textNode, when you click on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">shape</span><span class="o">:</span> <span class="p">{</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Text'</span><span class="p">,</span>
        <span class="p">}</span>
    <span class="p">};</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
    <span class="c1">//To draw an object once, activate draw once</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<p>Once you activate the TextTool, perform label editing of a node/connector.</p>

<h2 id="polygon-shape">Polygon shape</h2>

<p>ASP.NET Core Diagram allows to create the polygon shape by clicking and moving the mouse at runtime on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">drawingshape</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Basic'</span><span class="p">,</span> <span class="nx">shape</span><span class="o">:</span> <span class="s1">'Polygon'</span> <span class="p">};</span>
        <span class="c1">//JSON to create a polygon</span>
        <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="nx">drawingshape</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="polyline-connector">Polyline Connector</h2>

<p>ASP.NET Core Diagram allows to create the polyline segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">connector</span> <span class="o">=</span>  <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Polyline'</span><span class="p">};</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connector</span><span class="p">;</span>
    <span class="c1">//To draw an object once, activate draw once</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="tool-selection">Tool selection</h2>

<p>There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows.</p>

<ul>
  <li>Draw selection rectangle: MultipleSelect tool</li>
  <li>Pan the diagram: Zoom pan</li>
  <li>Draw nodes/connectors: DrawOnce/DrawOnce</li>
</ul>

<p>As all the three behaviors are completely different, you can achieve only one behavior at a time, based on the tool that you choose. When more than one of those tools are applied, a tool is activated based on the precedence given in the following table.</p>

<table>
  <thead>
    <tr>
      <th>Precedence</th>
      <th>Tools</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
      <td>ContinuesDraw</td>
      <td>Allows you to draw the nodes or connectors continuously. Once it is activated, you cannot perform any other interaction in the diagram.</td>
    </tr>
    <tr>
      <td>2nd</td>
      <td>DrawOnce</td>
      <td>Allows you to draw a single node or connector. Once you complete the DrawOnce action, SingleSelect, and MultipleSelect tools are automatically enabled.</td>
    </tr>
    <tr>
      <td>3rd</td>
      <td>ZoomPan</td>
      <td>Allows you to pan the diagram. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.</td>
    </tr>
    <tr>
      <td>4th</td>
      <td>MultipleSelect</td>
      <td>Allows you to select multiple nodes and connectors. When you enable both the MultipleSelect and ZoomPan tools, cursor hovers the diagram. When panning is enabled, you cannot select multiple nodes.</td>
    </tr>
    <tr>
      <td>5th</td>
      <td>SingleSelect</td>
      <td>Allows you to select individual nodes or connectors.</td>
    </tr>
    <tr>
      <td>6th</td>
      <td>None</td>
      <td>Disables all tools.</td>
    </tr>
  </tbody>
</table>

<p>Set the desired <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> to the tool property of the diagram model.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"Straight"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span> <span class="o">|</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">ZoomPan</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="events">Events</h2>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"Straight"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    
<span class="p">}</span></code></pre></div>

<h2 id="freehand-drawing">Freehand Drawing</h2>

<p>Diagram has support for free-hand drawing to draw anything on the diagram page independently. Free-hand drawing will be enabled by using the drawingObject property and setting its value to Freehand.</p>

<p>The following code illustrates how to draw a freehand drawing.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Freehand'</span><span class="p">,</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    
<span class="p">}</span></code></pre></div>

    />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,ConnectorConstraints,NodeModel, } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.InheritTooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            //Sets the content of the Tooltip
            content: 'Node1'
        },
    }];
let connector = [{
    id: 'connector1',
    sourcePoint: { x: 300, y: 100 },
    targetPoint: { x: 400, y: 250 },
    tooltip: { content: 'connector' },
    constraints: ConnectorConstraints.Default | ConnectorConstraints.InheritTooltip, 
}]
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node} connectors={connector}
     //Defines mouse over tooltip for a node
     tooltip=<h1 id="tools-in-aspnet-core-diagram">Tools in ASP.NET Core Diagram</h1>

<h2 id="drawing-tools">Drawing tools</h2>

<p>Drawing tool allows to draw any kind of node or connector during runtime by clicking and dragging on the diagram page.</p>

<h2 id="shapes">Shapes</h2>

<p>To draw a shape, set the JSON of that shape to the drawType property of the diagram and activate the drawing tool by using the <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> property.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">drawingshape</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Basic'</span><span class="p">,</span> <span class="nx">shape</span><span class="o">:</span> <span class="s1">'Rectangle'</span> <span class="p">};</span>
        <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="nx">drawingshape</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    <span class="p">}</span></code></pre></div>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s2">"Path"</span><span class="p">,</span>
            <span class="nx">style</span><span class="o">:</span> <span class="p">{</span> <span class="nx">fill</span><span class="o">:</span> <span class="s2">"#fbe172"</span> <span class="p">},</span>
            <span class="nx">annotations</span><span class="o">:</span> <span class="p">[{</span>
                <span class="nx">content</span><span class="o">:</span> <span class="s2">"Path"</span>
            <span class="p">}],</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">type</span><span class="o">:</span><span class="s1">'Path'</span><span class="p">,</span>
                <span class="nx">data</span><span class="o">:</span> <span class="s1">'M13.560 67.524 L 21.941 41.731 L 0.000 25.790 L 27.120 25.790 L 35.501 0.000 L 43.882 25.790 L 71.000 25.790 L 49.061 41.731 L 57.441 67.524 L 35.501 51.583 z'</span>
            <span class="p">}</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    <span class="p">}</span></code></pre></div>

<h2 id="connectors">Connectors</h2>

<p>To draw connectors, set the JSON of the connector to the drawType property. The drawing <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> can be activated by using the tool property.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"polyline"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="text">Text</h2>

<p>ASP.NET Core Diagram allows to create a textNode, when you click on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">shape</span><span class="o">:</span> <span class="p">{</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Text'</span><span class="p">,</span>
        <span class="p">}</span>
    <span class="p">};</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
    <span class="c1">//To draw an object once, activate draw once</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<p>Once you activate the TextTool, perform label editing of a node/connector.</p>

<h2 id="polygon-shape">Polygon shape</h2>

<p>ASP.NET Core Diagram allows to create the polygon shape by clicking and moving the mouse at runtime on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">drawingshape</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Basic'</span><span class="p">,</span> <span class="nx">shape</span><span class="o">:</span> <span class="s1">'Polygon'</span> <span class="p">};</span>
        <span class="c1">//JSON to create a polygon</span>
        <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">shape</span><span class="o">:</span> <span class="nx">drawingshape</span>
        <span class="p">};</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="polyline-connector">Polyline Connector</h2>

<p>ASP.NET Core Diagram allows to create the polyline segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">connector</span> <span class="o">=</span>  <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'Polyline'</span><span class="p">};</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connector</span><span class="p">;</span>
    <span class="c1">//To draw an object once, activate draw once</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="tool-selection">Tool selection</h2>

<p>There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows.</p>

<ul>
  <li>Draw selection rectangle: MultipleSelect tool</li>
  <li>Pan the diagram: Zoom pan</li>
  <li>Draw nodes/connectors: DrawOnce/DrawOnce</li>
</ul>

<p>As all the three behaviors are completely different, you can achieve only one behavior at a time, based on the tool that you choose. When more than one of those tools are applied, a tool is activated based on the precedence given in the following table.</p>

<table>
  <thead>
    <tr>
      <th>Precedence</th>
      <th>Tools</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
      <td>ContinuesDraw</td>
      <td>Allows you to draw the nodes or connectors continuously. Once it is activated, you cannot perform any other interaction in the diagram.</td>
    </tr>
    <tr>
      <td>2nd</td>
      <td>DrawOnce</td>
      <td>Allows you to draw a single node or connector. Once you complete the DrawOnce action, SingleSelect, and MultipleSelect tools are automatically enabled.</td>
    </tr>
    <tr>
      <td>3rd</td>
      <td>ZoomPan</td>
      <td>Allows you to pan the diagram. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.</td>
    </tr>
    <tr>
      <td>4th</td>
      <td>MultipleSelect</td>
      <td>Allows you to select multiple nodes and connectors. When you enable both the MultipleSelect and ZoomPan tools, cursor hovers the diagram. When panning is enabled, you cannot select multiple nodes.</td>
    </tr>
    <tr>
      <td>5th</td>
      <td>SingleSelect</td>
      <td>Allows you to select individual nodes or connectors.</td>
    </tr>
    <tr>
      <td>6th</td>
      <td>None</td>
      <td>Disables all tools.</td>
    </tr>
  </tbody>
</table>

<p>Set the desired <a href="https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html"><code>tool</code></a> to the tool property of the diagram model.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"Straight"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span> <span class="o">|</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">ZoomPan</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
<span class="p">}</span></code></pre></div>

<h2 id="events">Events</h2>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Straight'</span><span class="p">,</span>
           <span class="nx">segments</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"Straight"</span> <span class="p">}]</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    
<span class="p">}</span></code></pre></div>

<h2 id="freehand-drawing">Freehand Drawing</h2>

<p>Diagram has support for free-hand drawing to draw anything on the diagram page independently. Free-hand drawing will be enabled by using the drawingObject property and setting its value to Freehand.</p>

<p>The following code illustrates how to draw a freehand drawing.</p>

<div class="highlight"><pre><code class="language-javascript"><span class="kd">function</span> <span class="nx">Created</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">).</span><span class="nx">ej2_instances</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">connectors</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="s1">'connector1'</span><span class="p">,</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s1">'Freehand'</span><span class="p">,</span>
        <span class="p">}</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">drawingObject</span> <span class="o">=</span> <span class="nx">connectors</span><span class="p">;</span>
        <span class="c1">//To draw an object once, activate draw once</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">tool</span> <span class="o">=</span> <span class="nx">DiagramTools</span><span class="p">.</span><span class="nx">DrawOnce</span><span class="p">;</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">dataBind</span><span class="p">();</span>
    
<span class="p">}</span></code></pre></div>

    />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

The tooltip on mouse over can be disabled by assigning the diagram’s tooltip property as null. The following code example illustrates how to disable the mouse over tooltip at runtime.

//Initializes the React Diagram component
  <DiagramComponent id="container" width={'650px'} height={'350px'} 
    //Defines nodes
    nodes={node} connectors={connector}
    //Disables mouse over tooltip at runtime
    tooltip = {null}
    />

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;
}

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

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,PortConstraints,PortVisibility } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        ports:[{
            offset: {
                x: 0.5,
                y: 0
            },
            visibility: PortVisibility.Visible,
            //Defines mouse over tooltip for a node
            tooltip: {
                //Sets the content of the Tooltip
                content: 'Port Tooltip',
            },
            constraints: PortConstraints.Default | PortConstraints.ToolTip
        }]
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,PortConstraints,PortVisibility,NodeModel } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [{
        id: "node1",
        width: 100,
        height: 100,
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        ports:[{
            offset: {
                x: 0.5,
                y: 0
            },
            visibility: PortVisibility.Visible,
            //Defines mouse over tooltip for a node
            tooltip: {
                //Sets the content of the Tooltip
                content: 'Port Tooltip',
            },
            constraints: PortConstraints.Default | PortConstraints.ToolTip
        }]
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

The following image illustrates how the diagram displays tooltips during an interaction with ports:

Tooltip

The tooltip template content allows you to customize the tooltip by using HTML templates. This means you can define the structure and style of the tooltip using HTML, providing greater flexibility and control over its appearance. By leveraging HTML templates, you can include rich content such as formatted text, images, and other HTML elements within the tooltip, enhancing the user experience with more informative and visually appealing tooltips.

The following code example illustrates how to add formatted HTML content to the tooltip.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            //Sets the content of the Tooltip
            content: getContent(),
        }
    }];
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
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;
}
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    DiagramConstraints,
    NodeConstraints
} from "@syncfusion/ej2-react-diagrams";
import {
    NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
                id: "node1",
                width: 100,
                height: 100,
                annotations: [{
                    id: 'label',
                    content: 'Rectangle',
                    offset: {
                        x: 0.5,
                        y: 0.5
                    },
                    style: {
                        color: 'white'
                    },
                }],
                offsetX: 200,
                offsetY: 200,
                style: {
                    strokeColor: '#6BA5D7',
                    fill: '#6BA5D7'
                },
                constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
                //Defines mouse over tooltip for a node
                tooltip: {
                    //Sets the content of the Tooltip
                    content: getContent(),
                }
            }];

function App() {
  return (
    <DiagramComponent
      id="container"
      width={'650px'}
      height={'350px'}
      constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
      //Defines nodes
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

function getContent(): HTMLElement {
    let tooltipContent: HTMLElement = 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;
}

The React 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. 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.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                }
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //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',
        },
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    DiagramConstraints,
    NodeConstraints
} from "@syncfusion/ej2-react-diagrams";
import {
    NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
                id: "node1",
                width: 100,
                height: 100,
                annotations: [{
                    id: 'label',
                    content: 'Rectangle',
                    offset: {
                        x: 0.5,
                        y: 0.5
                    },
                    style: {
                        color: 'white'
                    }
                }],
                offsetX: 200,
                offsetY: 200,
                style: {
                    strokeColor: '#6BA5D7',
                    fill: '#6BA5D7'
                },
                constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
                //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',
                },
            }];
//Initializes the Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'650px'}
      height={'350px'}
      constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
      //Defines nodes
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

To display the tooltip at the mouse position, set the mouse option in the relativeMode property of the tooltip.

The following code example illustrates how to show tooltip at mouse position.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                }
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content: 'Node1',
            //Sets to show tooltip at mouse position
            relativeMode: 'Mouse',
        },
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    DiagramConstraints,
    NodeConstraints
} from "@syncfusion/ej2-react-diagrams";
import {
    NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
let node: NodeModel[] = [{
                id: "node1",
                width: 100,
                height: 100,
                annotations: [{
                    id: 'label',
                    content: 'Rectangle',
                    offset: {
                        x: 0.5,
                        y: 0.5
                    },
                    style: {
                        color: 'white'
                    }
                }],
                offsetX: 200,
                offsetY: 200,
                style: {
                    strokeColor: '#6BA5D7',
                    fill: '#6BA5D7'
                },
                constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
                //Defines mouse over tooltip for a node
                tooltip: {
                    content: 'Node1',
                    //Sets to show tooltip at mouse position
                    relativeMode: 'Mouse',
                },
            }];
//Initializes the Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'650px'}
      height={'350px'}
      constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
      //Defines nodes
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

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.

Refer the following sample where we used zoomIn animation for tooltip open and zoomOut animation for tooltip close with delay and duration.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //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
                },
            },
        },
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
        Diagram,
        DiagramComponent,
        NodeModel,
        DiagramConstraints,
        NodeConstraints
    } from "@syncfusion/ej2-react-diagrams";
import {
        NodeAnimationSettings
    } from '@syncfusion/ej2-navigations';
let node: NodeModel[] = [{
                    id: "node1",
                    width: 100,
                    height: 100,
                    annotations: [{
                        id: 'label',
                        content: 'Rectangle',
                        offset: {
                            x: 0.5,
                            y: 0.5
                        },
                        style: {
                            color: 'white'
                        },
                    }],
                    offsetX: 200,
                    offsetY: 200,
                    style: {
                        strokeColor: '#6BA5D7',
                        fill: '#6BA5D7'
                    },
                    constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
                    //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
                            },
                        },
                    },
                }];

//Initializes the Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'650px'}
      height={'350px'}
      constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
      //Defines nodes
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

A sticky tooltip will remain visible even after you move the mouse away from the node or connector. You can activate this feature by setting the isSticky property of the tooltip.

The following example shows how to render sticky tooltip.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content: 'Node1',
            position: 'BottomCenter',
            relativeMode: 'Object',
             //Activate sticky mode for tooltip
              isSticky: true,
        },
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
let node: NodeModel[] = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content: 'Node1',
            position: 'BottomCenter',
            relativeMode: 'Object',
             //Activate sticky mode for tooltip
              isSticky: true,
        },
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

The showTipPointer property allows to control the visibility of tooltip pointer. By default, the showTipPointer is set as true.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                content: 'Rectangle',
            }],
        offsetX: 250,
        offsetY: 200,
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content: 'Node1',
            position: 'BottomCenter',
            relativeMode: 'Object',
             //Hide tip pointer
             showTipPointer: false,
        },
    },{
        id: "node2",
        width: 100,
        height: 100,
        annotations: [{
                content: 'Rectangle',
            }],
        offsetX:100,
        offsetY: 200,
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content: 'Node1',
            position: 'BottomCenter',
            relativeMode: 'Object',
            //Hide tip pointer
            showTipPointer: true,
        },
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
let node: NodeModel[] = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                content: 'Rectangle',
            }],
        offsetX: 250,
        offsetY: 200,
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content: 'Node1',
            position: 'BottomCenter',
            relativeMode: 'Object',
            //Hide tip pointer
            showTipPointer: false,
        },
    },{
        id: "node2",
        width: 100,
        height: 100,
        annotations: [{
                content: 'Rectangle',
            }],
        offsetX:100,
        offsetY: 200,
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content: 'Node1',
            position: 'BottomCenter',
            relativeMode: 'Object',
            //Hide tip pointer
            showTipPointer: true,
        },
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

By default, the size of the tooltip is calculated based on its content. If you want to customize the size, you can use the width and height properties of the tooltip.

The following code example shows how to set the size for the tooltip:

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content:
            'Syncfusion diagram nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators',
          position: 'BottomCenter',
          relativeMode: 'Object',
          //Set size for tooltip
          width: 300,
          height: 100,
        },
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
let node: NodeModel[] = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content:
            'Syncfusion diagram nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators',
          position: 'BottomCenter',
          relativeMode: 'Object',
          //Set size for tooltip
          width: 300,
          height: 100,
        },
    }];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

You can show or hide the tooltip dynamically using a button click with the showTooltip and hideTooltip methods of the diagram. This allows you to control the tooltip visibility programmatically rather than relying on user hover actions. In some cases, you may want to display the tooltip without requiring the user to hover over the object.

The following example demonstrates how to show or hide the tooltip at runtime:

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
let node = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content: 'Node1',
            position: 'BottomCenter',
            relativeMode: 'Object',
           //To show tooltip on button click
          openOn: 'Custom',
        },
    }];
//Initializes the Diagram component
function App() {
    const showTooltip = () => {
    /**
   * parameter -  The object for which the tooltip will be shown.
   */
     diagramInstance.showTooltip(diagramInstance.nodes[0]);  
    }
    const hideTooltip = () => {
    /**
   * parameter - The object for which the tooltip should be hidden.
   */
     diagramInstance.hideTooltip(diagramInstance.nodes[0]);
    }
    return (
    <div>
      <button  onClick={showTooltip}>showTooltip</button>
      <button  onClick={hideTooltip}>hideTooltip</button>
    <DiagramComponent id="container" width={'650px'} 
    ref={(diagram) => (diagramInstance = diagram)}
    height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>
    </div>
    );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
let diagramInstance:DiagramComponent;
let node:NodeModel[] = [{
        id: "node1",
        width: 100,
        height: 100,
        annotations: [{
                id: 'label',
                content: 'Rectangle',
                offset: {
                    x: 0.5,
                    y: 0.5
                },
                style: {
                    color: 'white'
                },
            }],
        offsetX: 200,
        offsetY: 200,
        style: {
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7'
        },
        constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
        //Defines mouse over tooltip for a node
        tooltip: {
            content: 'Node1',
            position: 'BottomCenter',
            relativeMode: 'Object',
           //To show tooltip on button click
          openOn: 'Custom',
        },
    }];
//Initializes the Diagram component
function App() {
    const showTooltip = () => {
    /**
   * parameter -  The object for which the tooltip will be shown.
   */
     diagramInstance.showTooltip(diagramInstance.nodes[0]);  
    }
    const hideTooltip = () => {
    /**
   * parameter - The object for which the tooltip should be hidden.
   */
     diagramInstance.hideTooltip(diagramInstance.nodes[0]);
    }
    return (
    <div>
      <button  onClick={showTooltip}>showTooltip</button>
      <button  onClick={hideTooltip}>hideTooltip</button>
    <DiagramComponent id="container" width={'650px'} 
    ref={(diagram) => (diagramInstance = diagram)}
    height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip} 
    //Defines nodes
    nodes={node}/>
    </div>
    );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

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.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints,AnnotationConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node =  [ {
    id: 'node1',
    offsetX: 150,
    offsetY: 150,
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    annotations: [{
            id: 'label1',
            content: 'Rectangle',
            tooltip: {
                content: 'Rectangle',
                position: 'TopRight',
                relativeMode: 'Object',
            },
            constraints: AnnotationConstraints.Tooltip,
        }],
}];
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="container" width={'650px'} height={'350px'} 
    //Defines nodes
    nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    DiagramConstraints,
    AnnotationConstraints,
    NodeConstraints
} from "@syncfusion/ej2-react-diagrams";
import {
    NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
// A node is created and stored in nodes array.
let node: NodeModel[] = [ {
    id: 'node1',
    offsetX: 150,
    offsetY: 150,
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    annotations: [{
            id: 'label1',
            content: 'Rectangle',
            tooltip: {
                content: 'Rectangle',
                position: 'TopRight',
                relativeMode: 'Object',
            },
            constraints: AnnotationConstraints.Tooltip,
        }],
}];
//Initializes the Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'650px'}
      height={'350px'}
      //Defines nodes
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Tooltip in React Diagram

Default Tooltip

Disable Default Tooltip

Tooltip for a Specific Node/Connector

Inherit Diagram Tooltip

Disable Tooltip at Runtime

Tooltip for Ports

Tooltip Template Content

Tooltip Alignments

Tooltip Relative to Object

Tooltip Relative to Mouse Position

Tooltip Animation

Sticky Tooltip

Hide Tooltip Pointer

Tooltip Size

Show/Hide Tooltip at Runtime

Tooltip for Annotation