---
title: "Tooltip"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Tooltip with multiple placements and color variants. Accessible hover and focus hints for UI guidance—no JavaScript required."
url: https://frutjam.com/zh-hant/components/tooltip
---

# Tooltip Component

當使用者將滑鼠停留在某個元素上或將注意力集中在某個元素上時，工具提示元件會顯示附加資訊。工具提示採用語義 HTML 屬性和 CSS 構建，可提供特定於上下文的幫助，而不會使介面混亂，從而增強使用者體驗。 Frutjam 工具提示系統支援多個位置、自訂內容和流暢的動畫，以實現無縫資訊發現。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

**注意：**工具提示依賴於`:hover`和`:focus`，它們**在觸控/行動裝置上不可用**。對於行動優先佈局，請使用響應式變體 `lg:tooltip`，以便工具提示僅在桌面（大螢幕及以上）上啟動。在較小的螢幕上，請考慮使用不同的顯示模式，例如 [彈出框](https://frutjam.com/components/popover) 或 [模態](https://frutjam.com/components/modal)。

| 班級                | 類型  | 描述                          |
| ----------------- | --- | --------------------------- |
| tooltip           | 根據  | 在懸停/對焦時顯示 `data-tip` 內容的包裝器 |
| tooltip-content   | 修飾符 | 工具提示氣泡內的自訂 HTML 內容          |
| tooltip-top       | 修飾符 | 在觸發器上方開啟（預設）                |
| tooltip-bottom    | 修飾符 | 在觸發器下方打開                    |
| tooltip-left      | 修飾符 | 在扳機左側打開                     |
| tooltip-right     | 修飾符 | 在扳機右側打開                     |
| tooltip-start     | 修飾符 | 開啟邏輯起始端                     |
| tooltip-end       | 修飾符 | 打開到邏輯端                      |
| tooltip-primary   | 顏色  | 主要主題顏色氣泡                    |
| tooltip-secondary | 顏色  | 次要主題彩色氣泡                    |
| tooltip-accent    | 顏色  | 口音主題顏色氣泡                    |
| tooltip-neutral   | 顏色  | 中性主題色泡泡                     |
| tooltip-info      | 顏色  | 訊息語意顏色氣泡                    |
| tooltip-success   | 顏色  | 成功語意彩色氣泡                    |
| tooltip-warning   | 顏色  | 警告語意顏色氣泡                    |
| tooltip-error     | 顏色  | 錯誤語意顏色氣泡                    |

## 工具提示

## 自訂工具提示內容

```html
<div class="tooltip tooltip-end">
    <div class="tooltip-content">
        <div class="text-xl">❤️</div>
        <div>Like</div>
    </div>
    <button class="btn">Hover me</button>
</div>
```

## 帶有圖示的工具提示

```html
<div class="tooltip" data-tip="Menu">
    <button class="btn btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
        <span class="sr-only">Menu</span>
    </button>
</div>
```

## 強制開啟工具提示

```html
<div class="tooltip tooltip-open" data-tip="hello">
  <button class="btn">Force open</button>
</div>
```

## 工具提示定位選項

### 頂部位置

```html
<div class="tooltip tooltip-top tooltip-open" data-tip="Tooltip top">
    <button class="btn">Top position</button>
</div>
```

### 正確的安置

```html
<div class="tooltip tooltip-right tooltip-open" data-tip="Tooltip right">
    <button class="btn">Right position</button>
</div>
```

### 結束放置

```html
<div class="tooltip tooltip-end tooltip-open" data-tip="Tooltip end">
    <button class="btn">End position</button>
</div>
```

### 底部放置

```html
<div class="tooltip tooltip-bottom tooltip-open" data-tip="Tooltip bottom">
    <button class="btn">Bottom position</button>
</div>
```

### 左側放置

```html
<div class="tooltip tooltip-left tooltip-open" data-tip="Tooltip left">
    <button class="btn">Left position</button>
</div>
```

### 開始安置

```html
<div class="tooltip tooltip-start tooltip-open" data-tip="Tooltip start">
    <button class="btn">Start position</button>
</div>
```

## 工具提示顏色變體

### 原色

```html
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
  <button class="btn btn-xs">Primary color</button>
</div>
```

### 次要顏色

```html
<div class="tooltip tooltip-secondary tooltip-open" data-tip="Secondary">
  <button class="btn btn-xs">Secondary color</button>
</div>
```

### 強調色

```html
<div class="tooltip tooltip-accent tooltip-open" data-tip="Accent">
  <button class="btn btn-xs">Accent color</button>
</div>
```

### 訊息顏色

```html
<div class="tooltip tooltip-info tooltip-open" data-tip="Info">
  <button class="btn btn-xs">Info color</button>
</div>
```

### 成功色彩

```html
<div class="tooltip tooltip-success tooltip-open" data-tip="Success">
  <button class="btn btn-xs">Success color</button>
</div>
```

### 警告色

```html
<div class="tooltip tooltip-warning tooltip-open" data-tip="Warning">
  <button class="btn btn-xs">Warning color</button>
</div>
```

### 錯誤顏色

```html
<div class="tooltip tooltip-error tooltip-open" data-tip="Error">
  <button class="btn btn-xs">Error color</button>
</div>
```

### 中性色

```html
<div class="tooltip tooltip-neutral tooltip-open" data-tip="Neutral">
  <button class="btn btn-xs">Neutral color</button>
</div>
```

## 響應式工具提示

僅使用 `lg:tooltip` 在大螢幕上顯示

```html
<div class="lg:tooltip" data-tip="Hey there!">
  <button class="btn">Hover me</button>
</div>
```

## JS 和 React 助手

使用 `frutjam/js` 中的 `createTooltip` 或 `frutjam/eact` 中的 `useTooltip` 以程式設計方式顯示或隱藏工具提示 - 對於引導瀏覽或觸發幫助文字非常有用。