Hide connector tooltip while dragging the connector around

[JP]

Hi,

I'm using version 29.2.8 of "ej2-react-diagrams".

I conditionally add a tooltip to my connector, like so:

const tooltip = {
    content: hasError ? validationErrorText : ""
} as DiagramTooltipModel;

And I add this tooltip to my connectorModel.

Now when I hover the connector, the tooltip appears (as expected). But when I start dragging the connector around (by its start or end point) the tooltip is still displayed, and as soon as I touch it with my mouse, the drag event stops.

I attached a small screen recoding where you can see that the dragging stops as soon as I hit the tooltip.

I already tried to change the relativeMode of the tooltip to "object", this makes it a bit better because the tooltip is farther away, but the underlying problem still exists.

Attachment: Recording_a80abbc9.zip

[Moulidharan Gopalakrishnan]

Hi,

Thanks for reaching out. Based on your query and the video demonstration, we understand the issue you are facing. By default, tooltips in the diagram appear when hovering over node or connector elements and close either on mouse leave or when the hovered object starts interacting (such as dragging or resizing).

However, in the video demonstration, the tooltip does not close when dragging the connector begins. To investigate further, we need additional details about the tooltip configuration in your project. This will help us confirm whether the diagram tooltip is defined correctly or if a separate tooltip component is being used.

If possible, please provide a sample that replicates the issue so we can assist you more effectively

Regards,

Moulidharan

[JP]

Hi,

I'll try to create a sample, but until then this is how we add tooltips:

export const defaultConnectorConstraintsWithTooltip =

    (ConnectorConstraints.Default | ConnectorConstraints.Tooltip) &

    ~ConnectorConstraints.DragSegmentThumb &

    ~ConnectorConstraints.Drag;

 const tooltip = {

            content: validationErrorText

        } as DiagramTooltipModel;

// ...

const connector: ConnectorModel = {

            id: "con_" + transition.guid,

            sourceID: "node_" + transition.fromActionGuid,

            targetID: "node_" + transition.toActionGuid,

            allowNodeOverlap: false,

            style: {

                strokeColor: mainColor,

                strokeWidth: 3,

                strokeDashArray: !isDefault ? "3 3" : ""

            },

            targetDecorator: { shape: "Arrow", style: { strokeColor: mainColor, fill: mainColor, strokeWidth: 3 } },

            constraints: defaultConnectorConstraintsWithTooltip,

            addInfo: transition,

            tooltip: tooltip

        };

and they are ultimately added to diagramInstanceRef.connectors. Is there anything wrong or missing?

[Moulidharan Gopalakrishnan]

Hi,

Based on the provided code snippet, we were still unable to replicate the reported issue. To investigate further, Please provide a sample that replicates the issue or modify the sample we shared so we can assist you more effectively.

Sample: https://stackblitz.com/edit/react-by9mntpj-xo9lufug?file=index.js,index.html

Regards,

Moulidharan

[JP]

Hi,

I created a small sample which works the same way as our code:

https://codesandbox.io/p/sandbox/thirsty-tesla-forked-z3q96k

I added a screen recoding showing the behavior using that sample.

Attachment: Recording2_bd95d3c2.zip

[Moulidharan Gopalakrishnan]

Hi,

We can replicate the issue where the tooltip does not hide when connector dragging starts if the selector constraints are disabled. We will validate this behavior and provide you with an update. Meanwhile, the issue where dragging stops when the connector end hovers over the tooltip is due to the theme not being referenced correctly. Kindly refer to the latest diagram-related theme to resolve this issue. please refer the documentation

https://ej2.syncfusion.com/react/documentation/diagram/getting-started#adding-style-sheet-to-the-application
Regards,

Moulidharan

[JP]

Thanks! Indeed the styles for the diagram were missing, now the dragging doesn't stop when hitting the tooltip.

Please let me know when the "tooltip not hiding" is resolved so I can schedule an update of the Syncfusion components.

[Moulidharan Gopalakrishnan]

Hi , 

Reported Issue:  Connector tooltip remains visible after disabling selector tooltip

We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on December 30, 2025 weekly patch release. 

Feedback link: Connector tooltip remains visible after disabling selector tooltip in React | Feedback Portal

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Best Regards,

Moulidharan

[Moulidharan Gopalakrishnan]

Hi Jan Ahnen,

Reported issue: Connector tooltip remains visible after disabling selector tooltip

We have fixed the reported issue and included it in our latest patch release which is rolled out successfully.

Please upgrade to the latest version (v32.1.21) packages of the diagram to resolve this issue.     

https://www.npmjs.com/package/@syncfusion/ej2-diagrams

 

Root cause: While dragging, if the default tooltip is enabled, we simply update the tooltip content and position without closing it. The tooltip is closed only on mouse leave, which leads to the observed behavior issue.

Regards,

Moulidharan