Tooltip

Tooltips provide brief, context-sensitive information that appears when a user hovers over or focuses on an element. They help users understand icons, buttons, or form fields by offering additional details without cluttering the interface.

General Guidelines

Aspect	Best Practice
Usage	Present supplementary details or clarifications for a UI element. Tooltips appear on hover or focus and disappear when the user moves away.
Visual Hierarchy	Position tooltips near the related element, ensuring they don’t obstruct main content. They should feel like a natural extension, not an interruption.
Behavior	Triggered by hover/focus and dismissed when the user moves away. They’re non-intrusive, context-sensitive, and should enhance—not disrupt—workflow.
Psychological Impact	Provide on-demand information to enhance understanding without forcing navigation away or cluttering the interface.
Examples	Explaining an icon’s function or providing formatting guidelines for a form field.

Format and Punctuation

Use sentence case and proper punctuation for consistency and readability.
Write in active voice, using simple, clear language.
Avoid jargon; if needed, define unfamiliar terms.
Keep tooltips concise and focused on adding genuine value.

Do’s and Don’ts

Do

Use tooltips to clarify non-obvious functions or provide short, helpful explanations. * Keep messages brief and easy to understand.

Don't

Present critical information that users must see to complete a task; that should be visible without interaction. * Repeat what’s already obvious from the interface.

Additional Guidance

Ensure accessibility by making tooltips keyboard navigable and screen reader friendly. Refer to ARIA guidelines and follow best practices for inclusive design.

See: Blazor Telerik UI for Blazor Tooltip Documentation | Tooltip Accessibility

Telerik Links

For technical details and integration guidance:

General Guidelines

Aspect	Best Practice
Usage	Present supplementary details or clarifications for a UI element. Tooltips appear on hover or focus and disappear when the user moves away.
Visual Hierarchy	Position tooltips near the related element, ensuring they don’t obstruct main content. They should feel like a natural extension, not an interruption.
Behavior	Triggered by hover/focus and dismissed when the user moves away. They’re non-intrusive, context-sensitive, and should enhance—not disrupt—workflow.
Psychological Impact	Provide on-demand information to enhance understanding without forcing navigation away or cluttering the interface.
Examples	Explaining an icon’s function or providing formatting guidelines for a form field.

Format and Punctuation

Use sentence case and proper punctuation for consistency and readability.
Write in active voice, using simple, clear language.
Avoid jargon; if needed, define unfamiliar terms.
Keep tooltips concise and focused on adding genuine value.

Do’s and Don’ts

Do

Use tooltips to clarify non-obvious functions or provide short, helpful explanations. * Keep messages brief and easy to understand.

Don't

Present critical information that users must see to complete a task; that should be visible without interaction. * Repeat what’s already obvious from the interface.

Additional Guidance

Ensure accessibility by making tooltips keyboard navigable and screen reader friendly. Refer to ARIA guidelines and follow best practices for inclusive design.

See: Blazor Telerik UI for Blazor Tooltip Documentation | Tooltip Accessibility

Telerik Links

For technical details and integration guidance:

For more examples, visit the Storybook.

Example

@inject TooltipService tooltipService

<StudsButton Text="Hover me"
            MouseEnter="@(args => ShowTooltip(args,
                new TooltipOptions(){
                    Text = "This is a tooltip",
                    Position = TooltipPosition.Bottom
                }))" />

@code {
    void ShowTooltip(ElementReference elementReference, TooltipOptions options = null) =>
        tooltipService.Open(elementReference, "This is a tooltip", options);
}

TooltipService Methods

Open(ElementReference element, string text, TooltipOptions options = null)

method

Opens a tooltip with text content.

Opens a tooltip with custom content.

Close()

method

Closes the currently displayed tooltip.

TooltipOptions Properties

Position

TooltipPosition

default:"TooltipPosition.Bottom"

Gets or sets the position of the tooltip relative to the target element. Possible values: Top, Right, Bottom, Left.

Duration

int?

default:"2000"

Gets or sets the duration in milliseconds that the tooltip remains visible. If null, the tooltip will remain visible until explicitly closed.

Delay

int?

default:"null"

Gets or sets the delay in milliseconds before the tooltip appears.

Gets or sets whether the tooltip closes when clicking anywhere on the document.

Style

string

Gets or sets additional inline CSS styles for the tooltip.

CssClass

string

Gets or sets additional CSS class(es) for the tooltip.

Text

string

Gets or sets the text content of the tooltip.

ChildContent

RenderFragment<TooltipService>

Gets or sets the custom content of the tooltip.

Getting Started

Foundations

Components

Integration

Content

General Guidelines

Format and Punctuation

Do’s and Don’ts

Do

Don't

Additional Guidance

Telerik Links

General Guidelines

Format and Punctuation

Do’s and Don’ts

Do

Don't

Additional Guidance

Telerik Links

TooltipService Methods

TooltipOptions Properties

Getting Started

Foundations

Components

Integration

Content

​General Guidelines

​Format and Punctuation

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​Telerik Links

​General Guidelines

​Format and Punctuation

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​Telerik Links

​TooltipService Methods

​TooltipOptions Properties

General Guidelines

Format and Punctuation

Do’s and Don’ts

Additional Guidance

Telerik Links

General Guidelines

Format and Punctuation

Do’s and Don’ts

Additional Guidance

Telerik Links

TooltipService Methods

TooltipOptions Properties