Tooltip

since 1.0

Tooltip is a small popup that displays informative text when users hover over or focus on an element.

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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Tooltip
TooltipTrigger
TooltipContent
TooltipProvider

Props

All components accept standard HTML attributes and React props.

When not to use it

Don't put essential information or interactive controls inside a tooltip — it's inaccessible on touch devices and hidden from keyboard users until hover/focus. Use it only for supplementary hints on an already-labeled control; for richer or clickable content use a popover or hover card.

Toggle Tree

On This Page

Example Install Components Props When not to use it