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