TooltipService Class

A service for displaying tooltips programmatically on UI elements or at specific positions. TooltipService provides methods to show tooltips with text or custom HTML content, with configurable positioning, delays, and durations. To use this service, add it as a scoped service in your application's service collection and place a RadzenTooltip component in your main layout. Manages tooltip lifecycle, automatically closing tooltips on navigation and providing various positioning options (top, bottom, left, right). Tooltips can be shown on mouse enter/leave events or on demand, with configurable delays before showing and auto-close durations.

Inheritance

Object

TooltipService

Namespace: Radzen

Assembly: Radzen.Blazor.dll

Syntax

public class TooltipService

Examples

Show a simple text tooltip:

@inject TooltipService TooltipService
<RadzenButton Text="Hover me" MouseEnter="@(args => TooltipService.Open(args, "This is a tooltip"))" />

Show a tooltip with HTML content and custom options:

@inject TooltipService TooltipService
<RadzenButton Text="Show tooltip" MouseEnter="@(args => ShowTooltipWithHtml(args))" />
@code {
    void ShowTooltipWithHtml(ElementReference element) => TooltipService.Open(element, ts =>
        @<div>
            <b>Bold</b> and <i>italic</i> content
        </div>, 
        new TooltipOptions { Position = TooltipPosition.Top, Duration = 5000 });
}

Constructors

TooltipServicelink

Initializes a new instance of the TooltipService class.

Declaration
public TooltipService(NavigationManager uriHelper)
Parameters
Type Name Description
NavigationManager uriHelper The URI helper.

Methods

Closelink

Closes this instance.

Declaration
public void Close()

Disposelink

Disposes this instance.

Declaration
public void Dispose()

Openlink

Opens a tooltip with custom HTML content near the specified element. The tooltip will be positioned according to the options and can contain any Blazor markup.

Declaration
public void Open(ElementReference element, RenderFragment<TooltipService> childContent, TooltipOptions options)
Parameters
Type Name Description
ElementReference element The HTML element reference near which the tooltip will be displayed.
RenderFragment<TooltipService> childContent A render fragment that defines the custom HTML content of the tooltip. Receives the TooltipService as context.
TooltipOptions options Optional tooltip configuration including position, duration, delay, and styling. If null, default options are used.

Openlink

Opens a tooltip with custom HTML content near the specified element. The tooltip will be positioned according to the options and can contain any Blazor markup.

Declaration
public void Open(ElementReference element, string text, TooltipOptions options)
Parameters
Type Name Description
ElementReference element The HTML element reference near which the tooltip will be displayed.
string text
TooltipOptions options Optional tooltip configuration including position, duration, delay, and styling. If null, default options are used.

OpenOnTheBottomlink

Opens the specified element on the bottom position.

Declaration
public void OpenOnTheBottom(ElementReference element, string text, TooltipOptions o)
Parameters
Type Name Description
ElementReference element The element.
string text The text.
TooltipOptions o The o.

OpenOnTheLeftlink

Opens the specified element on the left position.

Declaration
public void OpenOnTheLeft(ElementReference element, string text, TooltipOptions o)
Parameters
Type Name Description
ElementReference element The element.
string text The text.
TooltipOptions o The o.

OpenOnTheRightlink

Opens the specified element on the right position.

Declaration
public void OpenOnTheRight(ElementReference element, string text, TooltipOptions o)
Parameters
Type Name Description
ElementReference element The element.
string text The text.
TooltipOptions o The o.

OpenOnTheToplink

Opens a tooltip with text content positioned above the specified element. This is a convenience method equivalent to calling Open() with TooltipPosition.Top.

Declaration
public void OpenOnTheTop(ElementReference element, string text, TooltipOptions options)
Parameters
Type Name Description
ElementReference element The HTML element reference above which the tooltip will be displayed.
string text The text content to display in the tooltip.
TooltipOptions options Optional additional tooltip configuration. The Position will be set to Top regardless of the value in options.

Events

OnCloselink

Raises the Close event.

Declaration
public event Action OnClose

OnNavigatelink

Occurs when [on navigate].

Declaration
public event Action OnNavigate

OnOpenlink

Occurs when [on open].

Declaration
public event Action<ElementReference, Type, TooltipOptions> OnOpen
An error has occurred. This app may no longer respond until reloaded. Reload 🗙