TooltipAPI
React Tooltip 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
範例
Import
import Tooltip from '@mui/joy/Tooltip';
// or
import { Tooltip } from '@mui/joy';
閱讀關於最小化 bundle 大小的指南,以了解差異。
名稱 | 類型 | 預設值 | 描述 |
---|---|---|---|
children* | element | - | Tooltip 參考元素。 |
arrow | bool | false | 若為 |
color | 'danger' | 'neutral' | 'primary' | 'success' | 'warning' | 'neutral' | 元件的顏色。它支援適用於此元件的 theme colors。 若要瞭解如何新增自己的顏色,請查看Themed components—Extend colors。 |
component | elementType | - | 用於根節點的元件。可以是字串 (使用 HTML 元素) 或元件。 |
describeChild | bool | false | 若 |
direction | 'ltr' | 'rtl' | 'ltr' | 文字方向。 |
disableFocusListener | bool | false | 不回應焦點可見事件。 |
disableHoverListener | bool | false | 不回應 hover 事件。 |
disableInteractive | bool | false | 使 tooltip 無法互動,亦即,當使用者在 |
disablePortal | bool | false |
|
disableTouchListener | bool | false | 不回應長按觸控事件。 |
enterDelay | number | 100 | 顯示 tooltip 前要等待的毫秒數。此 prop 不會影響 enter touch delay ( |
enterNextDelay | number | 0 | 當最近已開啟一個 tooltip 時,顯示 tooltip 前要等待的毫秒數。 |
enterTouchDelay | number | 700 | 使用者必須觸碰元素多少毫秒才會顯示 tooltip。 |
followCursor | bool | false | 若為 |
id | string | - | 此 prop 用於協助實作可存取性邏輯。若您未提供此 prop。它會回復為隨機產生的 id。 |
keepMounted | bool | false | 始終將 children 保留在 DOM 中。此 prop 在 SEO 情況下或當您想要最大化 Popper 的回應性時非常有用。 |
leaveDelay | number | 0 | 隱藏 tooltip 前要等待的毫秒數。此 prop 不會影響 leave touch delay ( |
leaveTouchDelay | number | 1500 | 使用者停止觸碰元素後,隱藏 tooltip 前要等待的毫秒數。 |
modifiers | Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' | 'afterRead' | 'afterWrite' | 'beforeMain' | 'beforeRead' | 'beforeWrite' | 'main' | 'read' | 'write', requires?: Array<string>, requiresIfExists?: Array<string> }> | - | Popper.js 是基於「plugin-like」架構,其大部分功能都完全封裝在「modifiers」中。 |
onClose | func | - | 當元件要求關閉時觸發的回呼。 簽章: function(event: React.SyntheticEvent) => void
|
onOpen | func | - | 當元件要求開啟時觸發的回呼。 簽章: function(event: React.SyntheticEvent) => void
|
open | bool | - | 若為 |
placement | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | 'bottom' | Tooltip 位置。 |
size | 'sm' | 'md' | 'lg' | 'md' | 元件的大小。 若要瞭解如何將自訂大小新增至元件,請查看Themed components—Extend sizes。 |
slotProps | { arrow?: func | object, root?: func | object } | {} | 用於每個 slot 內部的 props。 |
slots | { arrow?: elementType, root?: elementType } | {} | 用於每個 slot 內部的元件。 請參閱下方的Slots API 以取得更多詳細資訊。 |
sx | Array<func | object | bool> | func | object | - | 系統 prop,可讓您定義系統覆寫以及額外的 CSS 樣式。 請參閱 `sx` 頁面以取得更多詳細資訊。 |
title | node | - | Tooltip 標題。零長度標題字串、未定義、null 和 false 永遠不會顯示。 |
variant | 'outlined' | 'plain' | 'soft' | 'solid' | 'solid' | 要使用的global variant。 若要瞭解如何新增自己的 variants,請查看Themed components—Extend variants。 |
ref
轉發到根元素。Theme default props
您可以使用 JoyTooltip
透過 theme 變更此元件的預設 props。
若要瞭解如何自訂 slot,請查看覆寫元件結構指南。
Slot 名稱 | Class name | 預設元件 | 描述 |
---|---|---|---|
root | .MuiTooltip-root | 'div' | 呈現 root 的元件。 |
arrow | .MuiTooltip-arrow | 'span' | 呈現箭頭的元件。 |
這些 class name 對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時套用至元件的 slots。
Class name | Rule name | 描述 |
---|---|---|
.MuiTooltip-colorContext | colorContext | 當觸發顏色反轉時,套用至根元素的 Class name。 |
.MuiTooltip-colorDanger | colorDanger | 若 color="danger" ,則套用至根元素的 Class name。 |
.MuiTooltip-colorNeutral | colorNeutral | 若 color="neutral" ,則套用至根元素的 Class name。 |
.MuiTooltip-colorPrimary | colorPrimary | 若 color="primary" ,則套用至根元素的 Class name。 |
.MuiTooltip-colorSuccess | colorSuccess | 若 color="success" ,則套用至根元素的 Class name。 |
.MuiTooltip-colorWarning | colorWarning | 若 color="warning" ,則套用至根元素的 Class name。 |
.MuiTooltip-placementBottom | placementBottom | 若 placement 包含 "bottom",則套用至根元素的 Class name。 |
.MuiTooltip-placementLeft | placementLeft | 若 placement 包含 "left",則套用至根元素的 Class name。 |
.MuiTooltip-placementRight | placementRight | 若 placement 包含 "right",則套用至根元素的 Class name。 |
.MuiTooltip-placementTop | placementTop | 若 placement 包含 "top",則套用至根元素的 Class name。 |
.MuiTooltip-sizeLg | sizeLg | 若 size="lg" ,則套用至根元素的 Class name。 |
.MuiTooltip-sizeMd | sizeMd | 若 size="md" ,則套用至根元素的 Class name。 |
.MuiTooltip-sizeSm | sizeSm | 若 size="sm" ,則套用至根元素的 Class name。 |
.MuiTooltip-tooltipArrow | tooltipArrow | 若 arrow={true} ,則套用至根元素的 Class name。 |
.MuiTooltip-touch | touch | 若 tooltip 是透過觸控開啟,則套用至根元素的 Class name。 |
.MuiTooltip-variantOutlined | variantOutlined | 若 variant="outlined" ,則套用至根元素的 Class name。 |
.MuiTooltip-variantPlain | variantPlain | 若 variant="plain" ,則套用至根元素的 Class name。 |
.MuiTooltip-variantSoft | variantSoft | 若 variant="soft" ,則套用至根元素的 Class name。 |
.MuiTooltip-variantSolid | variantSolid | 若 variant="solid" ,則套用至根元素的 Class name。 |
您可以使用下列自訂選項之一覆寫元件的樣式
- 使用全域 class name。
- 在自訂 theme 中,使用 rule name 作為元件
styleOverrides
屬性的一部分。
原始碼
如果您在此頁面中找不到資訊,請考慮查看元件的實作以取得更多詳細資訊。