Design SystemComponentsTooltip

Tooltip

Installation

import { Tooltip } from "@olab/components";

Overview

滑過或點一下觸發元素時，浮出一段簡短說明。外框是品牌色細邊、12px 圓角，預設帶一個小箭頭指回觸發元素。

它同時吃 hover 和點擊：桌面滑過就開，手機點一下開、再點一下關，所以手機上也讀得到。

Interactive Demo

HOVER OR CLICK — tooltip opens with an arrow

State Matrix

OPEN STATE — static replica (same classes, rendered in place)

top arrow
placement = top
right arrow
placement = right
bottom arrow
placement = bottom
left arrow
placement = left
No arrow
showArrow = false
Long content wraps at the 320px max width instead of growing wider, so a sentence of two stays readable.
long content · max-w-xs

Examples

PLACEMENT — top / right / bottom / left (live)

WITHOUT ARROW — showArrow=false (live)

Spec

PartValueSource class
Backgroundsurfacebg-primary
Border1px brandborder border-[var(--color-bg-brand-solid)]
Text12px（bodyS）text-bodyS text-primary
Radius12pxrounded-lg
Padding12px × 8px（左右 × 上下）px-3 py-2
Max width320pxmax-w-xs
Arrow8px，底色同外框、邊框同品牌色--arrow-size:8px
Open / close delay0ms / 100ms

數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/tooltip.md。

Usage

Do

  • 補充一句不放也看得懂、放了更清楚的說明，例如名詞解釋、數字的計算口徑。
  • 內容保持一兩句；超過 320px 會自動換行，但長篇說明應該放進頁面或 Popover。
  • 預設放在上方；靠近畫面邊緣時再換 placement。

Don't

  • 不要把完成操作必需的資訊只放在 Tooltip 裡；有人不會去滑。
  • 不要在 Tooltip 裡放按鈕或表單；需要互動內容請用 Popover。
  • 不要用 className 改外框顏色或圓角；Tooltip 的品牌色細邊就是它的樣子。