menu

Blazor

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

    Show / Hide Table of Contents

    Class SfTooltip

    The SfTooltip component displays a pop-up containing information or a message when you hover, click, focus, or touch an element.

    Inheritance
    System.Object
    SfBaseComponent
    SfTooltip
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    Namespace: Syncfusion.Blazor.Popups
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class SfTooltip : SfBaseComponent
    Remarks

    The SfTooltip component can be customized with various properties such as content, position, and animation. The Tooltip can be triggered by various events including hover, click and focus. The component can be used to provide additional context or information about an element on a web page.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    Constructors

    SfTooltip()

    Declaration
    public SfTooltip()

    Properties

    Animation

    Gets or sets the animation settings for the opening and closing of the Tooltip.

    Declaration
    public AnimationModel Animation { get; set; }
    Property Value
    Type
    AnimationModel
    Remarks

    The animation property allows you to customize the animation of the Tooltip component, including the delay, duration, and various other effects of your choice. You can set the same or different animation options to the Tooltip when it is in the open or close state.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" Animation="@Animation">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>
    @code {
     public AnimationModel Animation { get; set; } = new AnimationModel
    {
       Open = new TooltipAnimationSettings {Delay = 0, Duration = 500, Effect = Effect.ZoomIn },
       Close = new TooltipAnimationSettings{Delay=0,Duration=500,Effect=Effect.ZoomOut}
    };
    }

    ChildContent

    Specifies the content that has to be rendered.

    Declaration
    public RenderFragment ChildContent { get; set; }
    Property Value
    Type
    Microsoft.AspNetCore.Components.RenderFragment

    Closed

    Gets or sets an event callback that is raised when the Tooltip component is closed.

    Declaration
    public EventCallback<TooltipEventArgs> Closed { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<TooltipEventArgs>

    An event callback function.

    Remarks

    This event is useful for performing additional actions when the Tooltip is closed, such as updating the UI or performing cleanup tasks. The event callback function takes a TooltipEventArgs parameter, which provides information about the Tooltip that was closed.

    CloseDelay

    Gets or sets the delay in milliseconds before the Tooltip closes.

    Declaration
    public double CloseDelay { get; set; }
    Property Value
    Type Description
    System.Double

    Accepts a double value representing the delay in milliseconds. The default value is 0.

    Remarks

    The CloseDelay property is used to specify the delay in milliseconds before the Tooltip closes. If no delay is needed, the default value of 0 can be used.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" CloseDelay="2000">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    Container

    Gets or sets the container element in which the Tooltip's pop-up will be appended.

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

    A string value that represents the container element selector. The default value is body".

    Examples
    <div class="parent">
    <SfTooltip Content="Let's go green to save the planet!!" Container=".parent">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>
    </div>

    Content

    Gets or sets the content of the Tooltip component.

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

    Accepts a string value representing the content of the Tooltip component.

    Remarks

    The Content property is used to specify the content of the Tooltip component as a string element.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    ContentTemplate

    Gets or sets the template that defines the content of the component.

    Declaration
    public RenderFragment ContentTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment

    The default value is null.

    Remarks

    The ContentTemplate is a RenderFragment that allows users to customize the appearance and content of the component. This property can be used to define custom HTML or Razor markup to be rendered as the content of the component.

    Created

    Gets or sets an event callback that is raised after the Tooltip component is created.

    Declaration
    public EventCallback<object> Created { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Object>

    An event callback function.

    CssClass

    Gets or sets the CSS classes to be applied to the Tooltip component.

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

    Accepts a CSS class string separated by space to customize the appearance of the component.

    Remarks

    The CssClass property is used to apply custom CSS class names that define specific user-defined styles and themes to be applied to the Tooltip element. Multiple class names can be specified by separating them with a space.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" CssClass="customtip">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    Destroyed

    Gets or sets an event callback that is raised when the Tooltip component is destroyed.

    Declaration
    public EventCallback<object> Destroyed { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Object>

    An event callback function.

    EnableRtl

    Gets or sets a value indicating whether to enable or disable the rendering of the component in right-to-left (RTL) direction.

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

    true, if the right to left direction can be enabled; Otherwise, false. The default value is false.

    Remarks

    The EnableRtl property is used to render the Tooltip component from right to left direction.

    Height

    Gets or sets the height of the Tooltip component.

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

    Accepts the string value. The default value is auto.

    Remarks

    The Height property is used to specify the height of the Tooltip component. If no height is specified, the Tooltip height will be set based on its content. When the content of the Tooltip exceeds the height value, the scroll mode will be enabled. The value can be any valid CSS height value, such as "100px" or "50%".

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" Height="40px">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    HtmlAttributes

    Gets or sets a collection of additional attributes that will applied to the tooltip element.

    Declaration
    public Dictionary<string, object> HtmlAttributes { get; set; }
    Property Value
    Type
    System.Collections.Generic.Dictionary<System.String, System.Object>
    Remarks

    Additional attributes can be added by specifying as inline attributes or by specifying @attributes directive.

    Examples

    In the below code example, tooltip width has been specified as style attribute in SfTooltip tag directive.

    <SfTooltip Content="Let's go green to save the planet!!" style="width:100px">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    ijsRuntime

    Declaration
    protected IJSRuntime ijsRuntime { get; set; }
    Property Value
    Type
    Microsoft.JSInterop.IJSRuntime

    IsSticky

    Gets or sets a value indicating whether the Tooltip should be displayed in an open state until it is closed manually.

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

    true, if the Tooltip should be displayed in an open state until it is closed manually. Otherwise, false. The default value is false.

    Remarks

    The IsSticky property is used to set the behavior of the Tooltip when it is displayed. If the value is set to true, the Tooltip will be displayed in an open state until it is closed manually, regardless of the user interaction that triggered the Tooltip. If the value is set to false, the Tooltip will be displayed for a specified duration based on the Animation property and then automatically closed.

    MouseTrail

    Enables or disables the ability for the Tooltip to follow the mouse pointer as it moves over the specified target element.

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

    true, if the Tooltip should be shown when the mouse pointer moves over the specific target. Otherwise, false.

    OffsetX

    Gets or sets the X-axis offset between the target and Tooltip element.

    Declaration
    public double OffsetX { get; set; }
    Property Value
    Type Description
    System.Double

    A double value representing the space between the target and Tooltip element in X-axis.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" OffsetX="20">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    OffsetY

    Gets or sets the space between the target and Tooltip element in the Y-axis.

    Declaration
    public double OffsetY { get; set; }
    Property Value
    Type Description
    System.Double

    Accepts a double value representing the space between the target and Tooltip element in the Y-axis.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" OffsetY="70">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    OnClose

    Gets or sets an event callback that is raised before the Tooltip hides from the screen.

    Declaration
    public EventCallback<TooltipEventArgs> OnClose { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<TooltipEventArgs>

    An event callback function.

    Remarks

    This event is useful for performing additional actions before the Tooltip is closed, such as updating the UI or validating user input. The event callback function takes a TooltipEventArgs parameter, which provides information about the Tooltip that is about to be closed. To prevent the Tooltip from closing, set the cancel property of the TooltipEventArgs parameter to true.

    OnCollision

    Gets or sets an event callback that is raised for every collision fit calculation.

    Declaration
    public EventCallback<TooltipEventArgs> OnCollision { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<TooltipEventArgs>

    An event callback function.

    Remarks

    This event is useful for fine-tuning the placement of the Tooltip on the screen and avoiding overlaps with other UI elements. The event callback function takes a TooltipEventArgs parameter, which provides information about the Tooltip and its placement. The TooltipEventArgs parameter includes the target element and collisionInfo object, which describe the Tooltip's position and collision detection results.

    OnOpen

    Gets or sets an event callback that is raised before the Tooltip is displayed over the target element.

    Declaration
    public EventCallback<TooltipEventArgs> OnOpen { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<TooltipEventArgs>

    An event callback function.

    Remarks

    This event is useful for customizing the Tooltip's appearance or behavior before it is displayed. The event callback function takes a TooltipEventArgs parameter, which provides information about the Tooltip and its target element. The TooltipEventArgs parameter includes the target element and an optional cancel argument, which can be set to true to prevent the Tooltip from being displayed.

    OnRender

    Gets or sets an event callback that is raised before the Tooltip and its contents will be added to the DOM.

    Declaration
    public EventCallback<TooltipEventArgs> OnRender { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<TooltipEventArgs>

    An event callback function.

    Remarks

    When one of its arguments cancel is set to true, the Tooltip can be prevented from rendering on the page. This event is mainly used to customize the Tooltip before it shows up on the screen. For example, to load the AJAX content or to set new animation effects on the Tooltip, this event can be opted.

    OpenDelay

    Gets or sets the delay time in milliseconds for opening the Tooltip after the user hovers over the target element.

    Declaration
    public double OpenDelay { get; set; }
    Property Value
    Type Description
    System.Double

    A double value representing the delay time in milliseconds. The default value is 0, which means that the Tooltip opens immediately after the user hovers over the target element.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" OpenDelay="2000">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    Opened

    Gets or sets an event callback that is raised when the Tooltip component is opened.

    Declaration
    public EventCallback<TooltipEventArgs> Opened { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<TooltipEventArgs>

    An event callback function.

    Remarks

    This event is useful for performing additional actions when the Tooltip is opened, such as updating the UI or tracking user interactions. The event callback function takes a TooltipEventArgs parameter, which provides information about the Tooltip that was opened.

    OpensOn

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

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

    Accepts the string value. The default value is Auto.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" OpensOn="Click">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    Position

    Gets or sets the position of the Tooltip element with respect to the Target element.

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

    A value of the Position enumeration that specifies the position of Tooltip element. The default value is TopCenter.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" Position=Position.LeftBottom>
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    ShowTipPointer

    Gets or sets a boolean value to show or hide the tip pointer of the Tooltip.

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

    true, if the tip pointer should be shown. Otherwise, false. The default value is true.

    Target

    Gets or sets the target selector where the Tooltip needs to be displayed.

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

    A string value representing the target selector. The target element is considered as the parent container.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" Target="#btn" >
     <SfButton ID="btn" Content="Show Tooltip"></SfButton>
    </SfTooltip>

    TipPointerPosition

    Gets or sets the position of the tip pointer on the tooltip. The available options are Auto, Start, Middle, and End. When set to auto, the tip pointer gets auto adjusted within the space of the target's length and does not point outside.

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

    A value of the TipPointerPosition enumeration that specifies the position of the tip pointer. The default value is Auto.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" TipPointerPosition=TipPointerPosition.End>
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    Width

    Gets or sets the width of the Tooltip component which accepts a string value.

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

    Accepts the string value.The default value is auto.

    Remarks

    When set to auto, the Tooltip width gets auto adjusted to display its content within the viewable screen.

    Examples
    <SfTooltip Content="Let's go green to save the planet!!" Width="100px">
     <SfButton Content="Show Tooltip"></SfButton>
    </SfTooltip>

    WindowCollision

    Gets or sets a value indicating whether to set the collision target element as the page viewport (window) or the Tooltip element, when using the target.

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

    true, if the window collision can be enabled; otherwise, false. The default value is false.

    Remarks

    The WindowCollision property is used to enable or disable the collision calculation between the target elements and viewport (window) instead of the Tooltip element. If the value is set to true, the collision will be calculated between the target and the viewport (window). Otherwise, the collision will be calculated between the target and the Tooltip element.

    Methods

    BuildRenderTree(RenderTreeBuilder)

    Declaration
    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

    CloseAsync(TooltipAnimationSettings)

    Hides the Tooltip with the specified animation settings.

    Declaration
    public Task CloseAsync(TooltipAnimationSettings animation = null)
    Parameters
    Type Name Description
    TooltipAnimationSettings animation

    The animation settings for the Tooltip close action. If null, uses the default "Close" animation.

    Returns
    Type Description
    System.Threading.Tasks.Task

    A task that represents the asynchronous operation of closing the Tooltip.

    Remarks

    This method hides the Tooltip with the specified animation settings. If the animation settings are not specified, the default "Close" animation is used.

    OnAfterRenderAsync(Boolean)

    Method invoked after each time the component has been rendered.

    Declaration
    protected override Task OnAfterRenderAsync(bool firstRender)
    Parameters
    Type Name Description
    System.Boolean firstRender

    Set to true for the first time component rendering; otherwise gets false.

    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    Overrides
    SfBaseComponent.OnAfterRenderAsync(Boolean)

    OnInitializedAsync()

    Method invoked when the component is ready to start.

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    Overrides
    SfBaseComponent.OnInitializedAsync()

    OnParametersSetAsync()

    Declaration
    protected override Task OnParametersSetAsync()
    Returns
    Type
    System.Threading.Tasks.Task

    OpenAsync(Nullable<ElementReference>, TooltipAnimationSettings)

    Opens the Tooltip with the specified animation settings and optional target element.

    Declaration
    public Task OpenAsync(Nullable<ElementReference> element = null, TooltipAnimationSettings animation = null)
    Parameters
    Type Name Description
    System.Nullable<Microsoft.AspNetCore.Components.ElementReference> element

    The target element in which the Tooltip should appear. If null, uses the default Tooltip element.

    TooltipAnimationSettings animation

    The animation settings for the Tooltip open action. If null, uses the default "Open" animation.

    Returns
    Type Description
    System.Threading.Tasks.Task

    A task that represents the asynchronous operation of opening the tooltip.

    Remarks

    This method shows the Tooltip on the specified target with the specified animation settings. If the animation settings are not specified, the default "Open" animation is used. The optional target element allows the Tooltip to be displayed in a specific element on the page, rather than the default Tooltip element. If the target element is not specified, the default tooltip element is used.

    PreventRender(Boolean)

    Controls the re-rendering behavior of the Tooltip component.

    Declaration
    public void PreventRender(bool preventRender = true)
    Parameters
    Type Name Description
    System.Boolean preventRender

    Optional. Determines whether the component should be prevented from re-rendering. Default value is true.

    Remarks

    This method internally sets the value to be returned by the ShouldRender method. By default, this method prevents the component from rendering. To enable rendering again, set preventRender to false.

    RefreshAsync()

    Refreshes the Tooltip component when the target element is dynamically updated.

    Declaration
    public Task RefreshAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A task that represents the asynchronous operation of refreshing the Tooltip.

    Remarks

    This method refreshes the Tooltip component when the target element is dynamically updated, for example, when the Tooltip is added to a new element in the DOM. It ensures that the Tooltip is properly positioned and styled based on the new target element.

    RefreshPositionAsync(Nullable<ElementReference>)

    Dynamically refreshes the position of the Tooltip element based on the target element.

    Declaration
    public Task RefreshPositionAsync(Nullable<ElementReference> target = null)
    Parameters
    Type Name Description
    System.Nullable<Microsoft.AspNetCore.Components.ElementReference> target

    The target element that the Tooltip is associated with. If null, uses the default target element.

    Returns
    Type Description
    System.Threading.Tasks.Task

    A task that represents the asynchronous operation of refreshing the Tooltip position.

    Remarks

    This method refreshes the position of the Tooltip element based on the target element. If the target element is not specified, the default target element is used. This method is useful when the position of the target element changes dynamically, such as when the element is resized or moved.

    ShouldRender()

    Declaration
    protected override bool ShouldRender()
    Returns
    Type
    System.Boolean
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved