Class DiagramsTooltip

Represents the textual content that appears while the mouse is hovering over an element of the diagram.

Inheritance
System.Object
SfBaseComponent
SfBaseExtension
DiagramsTooltip
DiagramTooltip
Inherited Members
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramsTooltip : SfBaseExtension, 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 SfBaseExtension mainParent { get; set; }
Property Value
Type Description
SfBaseExtension
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.