Class NodeTooltip

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

Inheritance
System.Object
SfDiagramBase
NodeTooltip
ConnectorTooltip
Inherited Members
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