How to set tooltip at runtime

[Torben Laursen]

Hi,

I would like to display custom tooltip for each node and connector at runtime. 

But how do I set the tooltip content, so that each time the user make a mouseover a custom message can be shown?

[Gowtham Gunashekar]

Hi Torben, 

 

On the further analysis of the shared details, we understood that you want to render custom tooltip for the node and connectors. Please refer to the following sample link and documentation link for how to  render the custom tooltip for all nodes and connectors. In the sample we have rendered a separate tooltip for node and connector ad added a button, when click on the button the node and connector’s tooltip content will change dynamically. 

 

Code snippet: 

        DiagramConnector connector = new DiagramConnector() 

        { 

            Id = "connector1", 

            SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 300 }, 

            TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 400 }, 

            Constraints= ConnectorConstraints.Default| ConnectorConstraints.Tooltip, 

            Tooltip = new ConnectorTooltip() 

            { 

                //Sets the content of the tooltip 

                Content = "Connector", 

                //Sets the position of the tooltip 

                Position = Syncfusion.Blazor.Popups.Position.BottomRight, 

                //Sets the tooltip position relative to the node 

                RelativeMode = TooltipRelativeMode.Object 

            } 

        }; 

        ConnectorCollection.Add(connector); 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChnageToolTipContnet1414736433.zip 

Documentation for tooltip: https://blazor.syncfusion.com/documentation/diagram/tool-tip/ 

 

Regards, 

Gowtham 

 

[Torben Laursen]

Thanks, I got that running now.

One more tooltip question. Can I format the tooltip so it is displayed as multi lines with line breaks?

Right now I can set the height of the tooltip. But the text is shown as one long line even that I insert "Environment.NewLine" into the text.

Please see attached screendump for example

Code used:

      toolTipText = string.Empty;

      for (int i = 0; i < 4; i++)

        toolTipText += $"Line number: {i.ToString()} {Environment.NewLine}";

Attachment: tooltip_59d300b5.zip

[Arunkumar Manoharan]

Hi Torben,   

We analyzed your code, and we suggest you add a tag while adding content to the tooltip to make single-line tooltip content to multiline. We have created a sample with a button click when you change the tooltip content by button click the content is being added with div tag and it's listed in the next line. For more information, please refer to the sample link and code snippet. 

 

Code snippet: 

for (int i = 0; i < 4; i++) 

        { 

            node.Tooltip.Content += $"<div>Line number: {i.ToString()}</div>"; 

        } 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/multiline-tootlip-contetn-124526155 

 

Regards, 

Arun.