Tooltip

Help that waits a moment on hover and describes its control.

Features

  • Waits 450 ms on hover, appears at once on focus.

Use it for

  • Icon buttons.

Installation

  1. Get runets.
    git clone https://github.com/ziyam-khan/runets
  2. Copy these files into your project, keeping their folders.
  3. Install what they use.
    pnpm add react @base-ui/react motion lucide-react
  4. Load the styles once. Bring your own base tokens, or use runets’ default theme.
    import 'runets/styles/theme.css'
    import 'runets/styles/kit.css'

Usage

import { Tooltip } from 'runets'

<Tooltip label="Search (⌘K)"><IconButton label="Search"><Search /></IconButton></Tooltip>

API

PropTypeWhat it does
labelstringThe help.

Accessibility

Source

The code is in src/kit/overlays.tsx in runets, MIT licensed.