Class DiagramTooltip
Represents the DiagramTooltip that provides textual content displayed when the mouse hovers over nodes or connectors in the diagram.
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramTooltip : DiagramObject, IDiagramObject, ICloneableRemarks
The DiagramTooltip enables interactive feedback by displaying contextual information when users hover over diagram elements, and can be customized with positioning, pointer visibility, and content options.
Examples
The following example demonstrates how to configure tooltips for nodes and connectors in a diagram.
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Node node1 = new Node() { ID = "node1", Constraints = NodeConstraints.Default|NodeConstraints.Tooltip ,OffsetX = 100, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node1",ShowTipPointer=false,Position=Position.BottomRight} };
nodes.Add(node1);
Connector connector1=new Connector{ ID = "Connector1" ,Constraints = ConnectorConstraints.Default|ConnectorConstraints.Tooltip,SourceID = new DiagramPoint() { X = 100, Y = 100 } ,TargetID=new DiagramPoint() { X = 100, Y = 100 } , Tooltip=new DiagramTooltip(){Content="connector1",ShowTipPointer=True,Position=Position.TopRight} }
connectors.Add(connector1);
}
}Constructors
DiagramTooltip()
Initializes a new instance of the Tooltip.
Declaration
public DiagramTooltip()DiagramTooltip(DiagramTooltip)
Creates a new instance of the Tooltip from the given tooltip.
Declaration
public DiagramTooltip(DiagramTooltip src)Parameters
| Type | Name | Description |
|---|---|---|
| DiagramTooltip | src | DiagramTooltip |
Properties
AnimationSettings
Gets or sets the animation settings for the SfDiagramComponent tooltip.
Declaration
public AnimationModel AnimationSettings { get; set; }Property Value
| Type | Description |
|---|---|
| AnimationModel | An AnimationModel that defines the animation behavior for tooltip display and hiding. The default value is null. |
Remarks
When configured, this property enables smooth animation transitions for tooltip appearance and disappearance.
Examples
The following example demonstrates how to configure tooltip animation settings with fade and zoom effects.
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
// Configure tooltip with animation settings
Tooltip = new DiagramTooltip()
{
AnimationSettings = new AnimationModel()
{
Open = new TooltipAnimationSettings() { Effect = Effect.FadeZoomIn, Duration = 100 },
Close = new TooltipAnimationSettings() { Effect = Effect.FadeZoomOut, Duration = 50 }
}
};
}
}Content
Gets or sets the textual content of the SfDiagramComponent tooltip.
Declaration
public string Content { get; set; }Property Value
| Type | Description |
|---|---|
| System.String | A System.String representing the text displayed in the tooltip. The default value is null. |
Remarks
When set to null or empty, the tooltip will not be displayed for diagram elements.
Examples
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Tooltip=new DiagramTooltip(){Content="NodeTooltip"} };
}IsSticky
Gets or sets a value indicating whether the tooltip remains visible even when the mouse moves away from the target element.
Declaration
public bool IsSticky { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Examples
The following example demonstrates how to create a diagram with a tooltip that remains visible when the mouse moves away from the target element:
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code {
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
nodes.Add(
new Node()
{
// Initialize node properties
Tooltip = new DiagramTooltip()
{
IsSticky = true,
// Other tooltip properties
};
});
}
} OpensOn
Gets or sets the type of open mode to display the DiagramTooltip content.
Declaration
public string OpensOn { get; set; }Property Value
| Type | Description |
|---|---|
| System.String | A System.String representing the open mode for tooltip display. The default value is |
Remarks
The open mode determines when and how the tooltip is displayed - Auto mode shows tooltips based on default behavior, Hover displays on mouse hover, Click requires user interaction, and Custom allows programmatic control of tooltip visibility.
Examples
The following example demonstrates how to set a custom open mode for diagram tooltips.
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
// Configure tooltip with custom open mode
Tooltip = new DiagramTooltip() { OpensOn = "Custom" };
}
}Position
Gets or sets the position of the tooltip relative to the target element in the SfDiagramComponent.
Declaration
public Position Position { get; set; }Property Value
| Type | Description |
|---|---|
| Position | A Position enumeration value that specifies the tooltip positioning. The default value is BottomRight. |
Examples
The following example demonstrates how to set the tooltip position to LeftBottom:
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
...
Tooltip = new DiagramTooltip() { Position = Position.LeftBottom };
...
}ShowTipPointer
Gets or sets a value indicating whether the tip pointer is visible for the DiagramTooltip.
Declaration
public bool ShowTipPointer { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean | A System.Boolean indicating whether the tip pointer should be displayed on tooltips. The default value is true. |
Remarks
When set to true, the tooltip displays with a pointer indicating the target element; when false, the tooltip appears as a simple rectangular box without the directional pointer.
Examples
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Tooltip=new DiagramTooltip(){ShowTipPointer=true};
} Methods
Clone()
Creates a new object that is a copy of the current tooltip.
Declaration
public override object Clone()Returns
| Type | Description |
|---|---|
| System.Object | A new object that is a copy of this tooltip |