menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class DiagramTooltip - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class DiagramTooltip

    Represents the textual content that appears while the mouse is hovering over a nodes/connectors

    Inheritance
    System.Object
    DiagramObject
    DiagramTooltip
    Implements
    IDiagramObject
    System.ICloneable
    Inherited Members
    DiagramObject.GetParent()
    DiagramObject.OnPropertyChanged(String, Object, Object, IDiagramObject)
    Namespace: Syncfusion.Blazor.Diagram
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramTooltip : DiagramObject, IDiagramObject, ICloneable
    Examples
      
    
    <SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind- Nodes="@nodes"></SfDiagramComponent>  
    @code{  
    SfDiagramComponent diagram;  
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
    DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();  
    protected override void OnInitialized()  
    {  
        Node node1 = new Node() { ID = "node1", Constraints = NodeConstraints.Default|NodeConstraints.Tooltip ,OffsetX = 100, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node1",ShowTipPointer=false,Position=Position.BottomRight} };  
        nodes.Add(node1);  
        Connector connector1=new Connector{ ID = "Connector1" ,Constraints =  ConnectorConstraints.Default|ConnectorConstraints.Tooltip,SourceID = new DiagramPoint() { X = 100, Y = 100 } ,TargetID=new DiagramPoint() { X = 100, Y = 100 } , Tooltip=new DiagramTooltip(){Content="connector1",ShowTipPointer=True,Position=Position.TopRight} }
        connectors.Add(connector1);  
    }  
    }  

    Constructors

    DiagramTooltip()

    Initializes a new instance of the Tooltip.

    Declaration
    public DiagramTooltip()

    DiagramTooltip(DiagramTooltip)

    Creates a new instance of the Tooltip from the given tooltip.

    Declaration
    public DiagramTooltip(DiagramTooltip src)
    Parameters
    Type Name Description
    DiagramTooltip src

    DiagramTooltip

    Properties

    AnimationSettings

    Gets or sets the user to enable the animation to the tooltip.

    Declaration
    public AnimationModel AnimationSettings { get; set; }
    Property Value
    Type Description
    AnimationModel

    The default value is null

    Examples
      
    
    <SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind- Nodes="@nodes"></SfDiagramComponent>  
    @code{  
    SfDiagramComponent diagram;  
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
    DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();  
    protected override void OnInitialized()  
    {  
       ...
       Tooltip=new DiagramTooltip(){AnimationSettings=new AnimationModel()
       {
          Open = new TooltipAnimationSettings(){Effect = Effect.FadeZoomIn,Duration=100},
          Close = new TooltipAnimationSettings(){Effect = Effect.FadeZoomOut,Duration=50}
       };  
       ...  
    }  

    Content

    Gets or set the textual content of the tooltip.

    Declaration
    public string Content { get; set; }
    Property Value
    Type Description
    System.String

    The default value will be null

    Examples
      
    
    <SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind- Nodes="@nodes"></SfDiagramComponent>  
    @code{  
    SfDiagramComponent diagram;  
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
    DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();  
    protected override void OnInitialized()  
    {
        ...  
        Tooltip=new DiagramTooltip(){Content="NodeTooltip"} };  
        ...
    }  

    IsSticky

    Gets or sets a value indicating whether the tooltip remains visible even when the mouse moves away from the target element.

    Declaration
    public bool IsSticky { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if the tooltip is always visible; otherwise, false to hide the tooltip when the mouse moves away. The default value is false.

    Examples

    The following example demonstrates how to create a diagram with a tooltip that remains visible when the mouse moves away from the target element:

     
    
    <SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent> 
    @code { 
        SfDiagramComponent diagram; 
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
        DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>(); 
    
        protected override void OnInitialized() 
        { 
            nodes.Add( 
            new Node() 
            { 
                // Initialize node properties 
    
            Tooltip = new DiagramTooltip() 
            { 
                IsSticky = true, 
                // Other tooltip properties 
            }; 
           }); 
        } 
    } 

    OpensOn

    Gets or sets the type of open mode to display the Tooltip content. The available open modes are Auto, Hover, Click and Custom.

    Declaration
    public string OpensOn { get; set; }
    Property Value
    Type Description
    System.String

    The default value is "Auto"

    Examples
      
    
    <SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind- Nodes="@nodes"></SfDiagramComponent>  
    @code{  
    SfDiagramComponent diagram;  
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
    DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();  
    protected override void OnInitialized()  
    {
        ...  
        Tooltip=new DiagramTooltip(){OpensOn="Custom"} };  
        ...
    }  

    Position

    Gets or sets the position of the Tooltip.

    Declaration
    public Position Position { get; set; }
    Property Value
    Type Description
    Position

    The default value is BottomRight

    Examples
      
    
    <SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind- Nodes="@nodes"></SfDiagramComponent>  
    @code{  
    SfDiagramComponent diagram;  
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
    DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();  
    protected override void OnInitialized()  
    {
        ...  
        Tooltip=new DiagramTooltip(){Position=Position.LeftBottom} };  
        ...
    }  

    ShowTipPointer

    Gets or sets a value indicates whether allows the users to show/hide the tip pointer

    Declaration
    public bool ShowTipPointer { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the tip pointer is visible; otherwise, false.

    Examples
      
    
    <SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind- Nodes="@nodes"></SfDiagramComponent>  
    @code{  
    SfDiagramComponent diagram;  
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
    DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();  
    protected override void OnInitialized()  
    {
        ...  
        Tooltip=new DiagramTooltip(){ShowTipPointer=True} };  
        ...
    }  

    Template

    Template property is deprecated, please use TooltipTemplate instead

    Declaration
    public string Template { get; set; }
    Property Value
    Type
    System.String
    Remarks

    The above example demonstrates how to use the replacement property, TooltipTemplate.

    Examples
      
    
    <SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind- Nodes="@nodes">  
        <DiagramTemplates>
            <TooltipTemplate>
            @{
                var target = context as NodeBase;
                if (target.ID == "node1")
                {
                    <div>
                        <p>Name : Diagram</p><p>Element: @target</p><p>action: Auto</p>
                    </div>
                }
            }
            </TooltipTemplate>
        </DiagramTemplates>
    </SfDiagramComponent>
     @code
     {
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node1 = new Node()
            {
                ID = "node1",
                Width = 100,
                Height = 100,
                OffsetX = 100,
                OffsetY = 100,
                Annotations = new DiagramObjectCollection<ShapeAnnotation>()
                {
                    // Annotation is created and stored in Annotations collection of Node.
                    new ShapeAnnotation { Content = "Auto" }
                },
                Tooltip = new DiagramTooltip()
                {
                    Position = Position.BottomCenter,
                    OpensOn = "Auto",
                    ShowTipPointer = true,
                },
                Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
    
            };
            nodes.Add(node1);
        }
    }

    Methods

    Clone()

    Creates a new object that is a copy of the current tooltip.

    Declaration
    public override object Clone()
    Returns
    Type Description
    System.Object

    A new object that is a copy of this tooltip

    Overrides
    DiagramObject.Clone()

    Implements

    IDiagramObject
    System.ICloneable
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved