edbnedbn/ui
Get Started
WelcomeWhy We're DifferentChoosing a VariantChangelogLicense
Components
OverviewAlert DialogCheckboxCollapsibleDialogFieldInputMenuNumber FieldPopoverProgressRadioScroll AreaSelectSeparatorSliderSwitchTabsToggleTooltip
Shared Components
InputTextareaCardAvatarTableAlertBreadcrumbPagination
0installs
Components
Maps
GitHub stars
HomeDocsComponentsStaticTooltip

On this page

Tooltip

A popup that displays information related to an element when it receives focus or hover. Built on Base UI Tooltip primitives.

Usage

import {
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
  TooltipPortal,
  TooltipPositioner,
  TooltipPopup,
} from "@/components/ui/static/tooltip"
<TooltipProvider>
  <TooltipRoot>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipPortal>
      <TooltipPositioner>
        <TooltipPopup>Tooltip content</TooltipPopup>
      </TooltipPositioner>
    </TooltipPortal>
  </TooltipRoot>
</TooltipProvider>

Installation

Install dependencies

TypeScript
npm install @base-ui/react

Examples

Icon Buttons

API Reference

openboolean

Controlled open state of the tooltip.

onOpenChange(open: boolean) => void

Callback when open state changes.

delaynumber
=200

Delay in ms before showing tooltip.

closeDelaynumber
=0

Delay in ms before hiding tooltip.