Class DiagramsTooltip
Represents the textual content that appears while the mouse is hovering over an element of the diagram.
Inheritance
Inherited Members
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramsTooltip : SfDiagramBaseExtension, IBaseInit
Remarks
The Tooltip will be displayed, when dragging, resizing, rotating a node, and when the cursor hovers over any diagram elements.
Examples
<SfDiagram Height="600px" Nodes="@NodeCollection" Constraints="DiagramConstraints.Default | DiagramConstraints.Tooltip" Tooltip="@Tooltip">
<DiagramSnapSettings Constraints = "SnapConstraints.None" ></ DiagramSnapSettings >
</ SfDiagram >
@code{
//Defines diagram's node collection
public ObservableCollection<DiagramNode> NodeCollection { get; set; }
// Defines position of the tooltip
public DiagramTooltip Tooltip = new DiagramTooltip()
{
Content = "Nodes",
Position = Syncfusion.Blazor.Popups.Position.TopLeft
};
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.InheritTooltip,
};
NodeCollection.Add(Node);
}
}
Constructors
DiagramsTooltip()
Declaration
public DiagramsTooltip()
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, zoom in, zoom out,etc., The following code shows how to define the Animation property of DiagramsTooltip.
Examples
//. .
//. .
//Defines mouse over tooltip for a node
Tooltip = new NodeTooltip()
{
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 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 |
jsProperty
Declaration
protected override string jsProperty { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Overrides
mainParent
Declaration
protected override SfDiagramBaseExtension mainParent { get; set; }
Property Value
Type | Description |
---|---|
Syncfusion.Blazor.Diagrams.Internal.SfDiagramBaseExtension |
Overrides
OpenOn
Specifies whether the tooltip can be open automatically or open manually using public API.
Declaration
public TooltipMode OpenOn { get; set; }
Property Value
Type | Description |
---|---|
TooltipMode |
Remarks
This property has two options, they are Auto and custom. By default, it will be Auto.
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 DiagramsTooltip 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 |
Methods
GetJSNamespace()
Declaration
public string GetJSNamespace()
Returns
Type | Description |
---|---|
System.String | Get the parent namespaces. |
OnInitializedAsync()
Declaration
protected override Task OnInitializedAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Returns asynchronous operation when the component is ready to start, having received its initial parameters from its parent in the render tree. |
Overrides
OnParametersSetAsync()
Declaration
protected override Task OnParametersSetAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Returns asynchronous operation when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties. |