Skip to content
DOL Studio

Tooltip & Dialog box

Design: Stable Code: Coded overlaypersistent 10 Figma sets 1 standalone Dialog content/Inverse bg - General

Live preview

Placements (hover) — dark
Top tooltip
Bottom tooltip
Left tooltip
Right tooltip
Light variant
Light tooltip on top
Light tooltip on bottom
Size md — longer content
Switch the active workspace from anywhere
Without arrow
Cleaner without arrow
Icon button + tooltip (common pattern)
More information about this field
Multi-line — title + body (Figma rich variant)
Tooltip content
The definition tooltip provides additional help or defines an item or term.

Import & files

Import
import { Tooltip & Dialog box } from "@dol/ui/tooltip";
Source file
packages/@dol/ui/src/tooltip/Tooltip.tsx

Figma source

Figma source 10 sets
Page
Tooltip, Dialog box
Sets
10 + 1 standalone
Primary set
Dialog content/Inverse bg - General · 3 variants Open in Figma →
Showing: Dialog content/Inverse bg - General
9 other sets
  • Dialog box/Blue outline 24 variants Figma →
  • Dialog box/Brand outline 24 variants Figma →
  • Dialog box/Primary 24 variants Figma →
  • Dialog box/Success 24 variants Figma →
  • Dialog content/Neutral - General 3 variants Figma →
  • Tooltip / Dark tooltip 48 variants Figma →
  • Tooltip / Definition / Light - No arrow tooltip 2 variants Figma →
  • Tooltip / Light - Border tooltip 48 variants Figma →
  • Tooltip content/Inverse bg - General 2 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Tooltip & Dialog box
Slug: `tooltip-dialog`
Domain: general · Category: overlay
Design: stable · Code: coded


## Description
Persistent tooltip + dialog-box primitives - three style families (Primary / Brand outline / Blue outline).


## Import
```ts
import { Tooltip & Dialog box } from "@dol/ui/tooltip";
```
Source: `packages/@dol/ui/src/tooltip/Tooltip.tsx`


## Figma source
Page: Tooltip, Dialog box
Sets: 10
Primary: Dialog content/Inverse bg - General
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=18936-36057

Related

  • M
    overlay

    Modal

    Coded
  • Tooltip body

    Popover

    Coded
  • D
    overlay

    Drawer

    Coded
  • M
    overlay

    KidModal

    KIDCoded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).