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
   }
} 

Displaying 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 and display excess content on hover in a Diagram.

You can refer to our Blazor Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries 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!