Tooltip

Guidelines
React API Reference
Blazor API Reference

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.

Add the Provider

In your application’s root component, wrap your app with the TooltipProvider component.

import {
  TooltipProvider
} from '@strongtie/design-system/tooltip';

...

function App() {
  return (
    <TooltipProvider>
      <YourApp />
    </TooltipProvider>
  );
}

Import

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent
} from '@strongtie/design-system/tooltip';

Usage

  <Tooltip>
    <TooltipTrigger>
      <Button>Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a tooltip</p>
    </TooltipContent>
  </Tooltip>

Usage Examples

  <Tooltip>
    <TooltipTrigger>
      <Button>Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a tooltip</p>
    </TooltipContent>
  </Tooltip>

Styling Classes

The following CSS classes are applied by the Tooltip components:

tooltip – Main tooltip container with positioning and styling

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.

Usage Examples

@inject TooltipService tooltipService

<StudsButton Text="Hover me" @ref="buttonRef"
            MouseEnter="@(() => ShowBasicTooltip())" />

@code {
    ElementReference buttonRef;

    void ShowBasicTooltip()
    {
        tooltipService.Open(buttonRef, "This is a basic tooltip");
    }
}

Styling Classes

The following CSS classes are applied by the Tooltip service:

tooltip – Main tooltip container with positioning and content styling
tooltip-arrow – Arrow pointer indicating the tooltip’s relationship to its trigger
Custom classes can be applied via the CssClass property in TooltipOptions

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

General Guidelines

Format and Punctuation

Do’s and Don’ts

Do

Don't

Additional Guidance

Usage Examples

Styling Classes

TooltipService Methods

TooltipOptions Properties

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​General Guidelines

​Format and Punctuation

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​Usage Examples

​Styling Classes

​TooltipService Methods

​TooltipOptions Properties

​Usage Examples

​Styling Classes

General Guidelines

Format and Punctuation

Do’s and Don’ts

Additional Guidance

Usage Examples

Styling Classes

TooltipService Methods

TooltipOptions Properties

Usage Examples

Styling Classes