Blazor

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

    Show / Hide Table of Contents

    Class DiagramsTooltip

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

    Inheritance
    System.Object
    SfBaseComponent
    Syncfusion.Blazor.Diagrams.Internal.SfDiagramBaseExtension
    DiagramsTooltip
    DiagramTooltip
    Inherited Members
    SfBaseComponent.OnAfterRenderAsync(Boolean)
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramsTooltip : SfDiagramBaseExtension, 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
    Syncfusion.Blazor.Diagrams.Internal.SfDiagramBaseExtension.jsProperty

    mainParent

    Declaration
    protected override SfDiagramBaseExtension mainParent { get; set; }
    Property Value
    Type Description
    Syncfusion.Blazor.Diagrams.Internal.SfDiagramBaseExtension
    Overrides
    Syncfusion.Blazor.Diagrams.Internal.SfDiagramBaseExtension.mainParent

    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
    SfBaseComponent.OnInitializedAsync()

    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.

    Back to top Generated by DocFX
    Copyright © 2001 - 2022 Syncfusion Inc. All Rights Reserved