Class DiagramTooltip

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

Inheritance
System.Object
DiagramObject
DiagramTooltip
Implements
System.ICloneable
Inherited Members
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

Implements

System.ICloneable