Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class NodeTooltip - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class NodeTooltip

    Represents the textual content that appears while the mouse is hovering over a node.

    Inheritance
    System.Object
    SfDiagramBase
    NodeTooltip
    ConnectorTooltip
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    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
    Back to top Generated by DocFX
    Copyright © 2001 - 2021 Syncfusion Inc. All Rights Reserved