We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Connector and Nodes


Is there any characteristic of the Diagram component, when a connector appears from a certain Port of a figure, and when it is released, a tooltip or popup appears that shows information about the figures or Nodes that are going to be connected?

For example, in the following image, it can be seen that when the connector is released, the nodes that we can insert appear (they can be all).

1 Reply 1 reply marked as answer

BM Balasubramanian Manikandan Syncfusion Team December 16, 2022 01:07 PM UTC

Use ‘ConnectionChangeEvent’ to show the information after it released from port. Refer to the below mention code example, sample and documentation.

Code Example:

        connectionChange={(args) => {

          if (args.state == 'Changed') {

            if (diagramInstance.connectors[0].targetPortID == '') {

              diagramInstance.connectors[0].annotations[0].template =

                '<div><span style="color:blue; border: 2px solid red; background-color: #ffcaca;">This is syncfusion</span></div>';


            } else {

              diagramInstance.connectors[0].annotations[0].template = '';









Marked as answer
Live Chat Icon For mobile
Up arrow icon