Class NodeTooltip
Represents the textual content that appears while the mouse is hovering over a node.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class NodeTooltip : SfDiagramBase
Examples
<SfDiagram Height="600px"
Constraints="DiagramConstraints.Default | DiagramConstraints.Tooltip" Nodes="@NodeCollection">
</SfDiagram>
@code{
// Defines diagram's nodes collection
public ObservableCollection<DiagramNode> NodeCollection { get; set; }
protected override void OnInitialized()
{
NodeCollection = new ObservableCollection<DiagramNode>();
//Defines nodes
DiagramNode Node = new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 200,
OffsetY = 200,
Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" },
Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
Tooltip = new NodeTooltip()
{
Content = "Node1",
//Sets to show tooltip at mouse position
RelativeMode = TooltipRelativeMode.Mouse
}
};
NodeCollection.Add(Node);
}
}
Constructors
NodeTooltip()
Represents the textual content that appears while the mouse is hovering over a node.
Declaration
public NodeTooltip()
Properties
Animation
This property allows the user to enable the animation to the tooltip.
Declaration
public DiagramTooltipAnimation Animation { get; set; }
Property Value
Type | Description |
---|---|
DiagramTooltipAnimation |
Remarks
To animate the tooltip specific animation effects are available and it can be controlled by Animation property. This property allows the user to set some animation effects such as display, duration, ZoomIn, ZoomOut,etc.
Examples
Animation = new Syncfusion.Blazor.Popups.AnimationModel()
{
//Animation settings to be applied on the tooltip, while it is being shown over the target.
Open = new Syncfusion.Blazor.Popups.TooltipAnimationSettings()
{
//Animation effect on the tooltip is applied during open and close actions.
Effect = Syncfusion.Blazor.Popups.Effect.ZoomIn,
//Duration of the animation that is completed per animation cycle.
Duration = 1000,
//Indicating the waiting time before the animation begins.
Delay = 0
},
//Animation settings to be applied on the tooltip, when it is closed.
Close = new Syncfusion.Blazor.Popups.TooltipAnimationSettings()
{
Effect = Syncfusion.Blazor.Popups.Effect.ZoomOut,
Duration = 500,
Delay = 0
}
}
}
Content
Defines the textual content of the tooltip.
Declaration
public string Content { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Height
Gets or sets the height of the tooltip.
Declaration
public string Height { get; set; }
Property Value
Type | Description |
---|---|
System.String |
OpenOn
Specifies whether the tooltip can be open automatically or open manually using public API. By default, its set to Auto.
Declaration
public TooltipMode OpenOn { get; set; }
Property Value
Type | Description |
---|---|
TooltipMode |
Position
Defines the position of the Tooltip.
Declaration
public Position Position { get; set; }
Property Value
Type | Description |
---|---|
Position |
Remarks
• Tooltip can be aligned by using the NodeTooltip property. |
• There are applicable positions such as TopLeft, TopRight, BottomLeft, BottomRight, etc., where the tooltip can be displayed over the specific target elements. |
• By default, the position of the tooltip will be TopLeft. |
RelativeMode
This property defines whether the tooltip has to displayed around the object or at the mouse position. By default, it will be Mouse.
Declaration
public TooltipRelativeMode RelativeMode { get; set; }
Property Value
Type | Description |
---|---|
TooltipRelativeMode |
ShowTipPointer
Defines the tooltip has tip pointer or not. By default, it will be true.
Declaration
public bool ShowTipPointer { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
Width
Gets or sets the width of the tooltip.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String |