🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Tooltip

A floating popup that displays informative text when users hover over or focus an element.

Tooltips provide contextual information about UI elements without cluttering the interface. They appear on hover or focus and disappear when the user moves away. Tooltips are ideal for explaining icon buttons, providing additional context for truncated text, or offering helpful hints about functionality.

Built on top of Radix UI's Tooltip primitive with full keyboard navigation, focus management, and accessibility support including proper ARIA attributes.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@strongtie/design-system/tooltip"

export function TooltipDefault() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Installation


npm install @strongtie/design-system

import { Tooltip } from "@strongtie/design-system/tooltip"

Components

This module exports the following components:

Tooltip
TooltipTrigger
TooltipContent
TooltipProvider

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@strongtie/design-system/tooltip"

export function TooltipDefault() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

tooltip

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI tooltip Documentation

Toggle Tree

On This Page

Example Installation Components Props Example Styling Additional Classes Accessibility Resources

Contribute

Tooltip

A floating popup that displays informative text when users hover over or focus an element.

Built on top of Radix UI's Tooltip primitive with full keyboard navigation, focus management, and accessibility support including proper ARIA attributes.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@strongtie/design-system/tooltip"

export function TooltipDefault() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Installation


npm install @strongtie/design-system

import { Tooltip } from "@strongtie/design-system/tooltip"

Components

This module exports the following components:

Tooltip
TooltipTrigger
TooltipContent
TooltipProvider

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@strongtie/design-system/tooltip"

export function TooltipDefault() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

tooltip

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI tooltip Documentation

Toggle Tree

On This Page

Example Installation Components Props Example Styling Additional Classes Accessibility Resources

Contribute