Node tooltip position is always in left-most in Complex-hierarchical tree layout

[Geeta]

Hi,

I have created tooltip for each node dynamically and provided the tooltip position to top right to every node. But its position is always to left-most of the svg container.

Attached the code for the same. Please take a look at once.

Attachment: synctooltippositionissue_4370dc49.zip

[Vivisa Ganesan]

Hi,

We have created the sample where we render the tooltip using the template as per your sample. It is working fine at our end. We are unable to replicate the issue at our end. If you are using the older version kindly upgrade to the latest version of diagram. Still, if you are facing issues at your end, kindly modify the below sample. Please refer the below sample.

Sample:

https://stackblitz.com/edit/angular-nb2vhu-64hsv3?file=src%2Fapp.component.ts,src%2Fapp.component.html

Upgrade to latest version 

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

Regards,

Vivisa

[Geeta]

I am using latest version of syncfusion

"^25.1.38"

and angular 17. But still facing the same issue.

Attachment: syntool_96eed2ce.zip

[Vivisa Ganesan]

HI,

Could you kindly confirm whether the same issue is replicated in the sample which we shared in our last update? If it seems to occur solely within your application, we kindly request you to compare it with our provided sample. In case you are unable to identify the issue, would you be able to share your application sample with us at [e-mail]? This will enable us to validate and provide you with further details.

Regards,

Vivisa

[Geeta]

Hi,

I have mailed the sample code requested by you on the [e-mail]. 

Attaching here as well.

Also when we unset the position key css for id= diagramcontent. The tooltip gets aligned with the node.

Regards

Geeta

Attachment: forum_a8d788f6.zip

[Vivisa Ganesan]

Hi,

After reviewing the sample you provided, we identified that the issue is related to the style configuration. It seems that the theme was not referenced in your sample. We have made modifications and updates accordingly to include the theme. You can either add below cdn link index.html file or refer the style from nodemodules in app.component.css file.Please refer to the updated sample below for clarification.

Code snippet

index.html:

CDN link:  <link  rel='nofollow' href="https://cdn.syncfusion.com/ej2/25.1.35/material.css"   rel="stylesheet"  />

 

app.component.css

@import "../../node_modules/@syncfusion/ej2-diagrams/styles/material.css"

 

 

Regards,

Vivisa

Attachment: myapp_28611825.zip