Can we add a custom tooltip (content from a component) for a node in Diagram
Hi Syncfusion Team,
I have a question.
I want to display a custom tooltip when click a node in diagram. That tooltip has content from a component. Maybe it just likes when we hover a point in chart, and a tooltip is displayed, but it only has some simple information.
For example, I've created a basic project.
https://stackblitz.com/edit/angular-11-new-swasxd?file=src%2Fapp%2Fapp.component.ts
In this project, what I want is that: when we click a node, the right side bar is displayed as a tooltip (or maybe like a dialog) and that tooltip look exactly the right side bar in the right of that page. That tooltip will give some useful information to user about the node we've clicked; and its position will be flexible, I mean most of the time, it will be on the right of that node, but if the node is too close to the right of the page, the tooltip will be on the left.
And don't forget to add the arrow icon. The position of this icon is flexible too, just like its behaviour in tooltip.
Tell me if you need any further information.
Kind Regards,
Nguyen
Hi,
Maybe you misunderstood my requirement.
In my example project with the link above, what I want is that when I click a node, a tooltip appears with the content of the right-side-bar component.
What I have done in my real project is that, I created a dialog (with the same content from the right-side-bar component) and set its position due to the node position. And when I click a node, that dialog is displayed. But this is not an ideal implementation, because we have to set some static value to the dialog's position; and it just works fine with some nodes; and with some other nodes, it looks a little bit weird.
As you can see in the image, the dialog is displayed next to the node, just like a tooltip, but it's not a tooltip, because I used the DialogComponent for it.
Do you have any perfect idea for this?
Kind Regards,
Nguyen
Hi,
I can give you a short video about what I've done. Sorry for blurring the video because it contains sensitive information.
Like I said before, I don't use the TooltipComponent because I canot bind a component to the tooltip's content. I created a dialog and set its position according to node's position.
this.openDialog.emit({
positionX: node.offsetX,
positionY: node.offsetY,
});
and in the dialog component:
public open(event: any): void {
this.position = {
X: event.positionX + 200 + 160,
Y: event.positionY
};
this.dialog.show();
this.arrowRef.nativeElement.style.display = 'block';
}
This's not an ideal implementation. Because we have to hard code for the position of that dialog (+200 + 160); and if the node is close to the right of the page (for example: offsetX > 900), I have to set the positionX again so that the dialog can be displayed on the right of the node (like in the video). I think there are many cases that I cannot control enough. And I also created a div to draw a arrow icon:
<div #arrowRef class="triangle-arrow"></div>
what I want is like this: 
but sometimes, it looks weird:
This is only a temporary solution.
I hope you can understand my requirement and reply soon.
Regards,
Nguyen
Attachment: demo_8e410855.rar
