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
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}
};
}

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>

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>

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

Determines 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

To set 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

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

It is used to customize 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

To set 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

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

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