How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram?

In Syncfusion® Blazor Diagram, you can prevent text overflow and control how text is displayed within a node using the TextWrapping and TextOverflow properties of the ShapeAnnotation. Additionally, you can show excess content on hover using the Tooltip feature.

Steps:
Prevent Text Overflow:

• Use the TextWrapping property to wrap the text within the bounds of the node.
• Use the TextOverflow property to handle text that overflows the node’s boundaries.

Display Excess Content on Hover:

• To display the full content when it overflows, use the Tooltip feature.

Example Code
Adjusting Annotation Content:

new ShapeAnnotation() {
   Content = "Your content here",
   Style = new TextStyle() {
       Bold = true,
       Color = "Black",
       FontFamily = "Arial",
       FontSize = 12,
       TextOverflow = TextOverflow.Clip,  
       TextWrapping = TextWrap.Wrap        // Wraps the text within the node
   }
} 

Display Excess Content on Hover:

You can use the Tooltip property to show excess content when a node is hovered over.

Node node = new Node()
{
   ID = "node1",
   OffsetX = 250,
   OffsetY = 250,
   Width = 100,
   Height = 100,
   Style = new ShapeStyle() 
   { 
       Fill = "#6495ED",  
       StrokeColor = "white" 
   },
   Tooltip = new DiagramTooltip() { Content = "Your Excess Content" },  
   Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, // Enable tooltip
}; 

Steps:

1. Set TextWrapping to Wrap: This ensures that the text within the annotation wraps to the next line when it reaches the edge of the node.
2. Set TextOverflow to Clip: This hides any content that overflows the node’s boundary, preventing overflow.
3. Assign Tooltip for Excess Content: Use the Tooltip property to display additional content when the node is hovered over.

Refer below UG for more information:

• TextWrapping
• TextOverFlow
• Tooltip

Conclusion:

This guide explains how to prevent text overflow in nodes and display excess content on hover in Syncfusion Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate diagram nodes.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Diagram and Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!