TooltipAPI
React Tooltip 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
範例
Import
import Tooltip from '@mui/material/Tooltip';
// or
import { Tooltip } from '@mui/material';
閱讀關於最小化 bundle size 的指南,以了解差異。
原生元件的 Props 也可使用。
名稱 | 類型 | 預設值 | 描述 |
---|---|---|---|
children* | element | - | Tooltip 參考元素。 |
arrow | bool | false | 若為 |
classes | object | - | 覆寫或擴充套用至元件的樣式。 請參閱下方CSS 類別 API 以取得更多詳細資訊。 |
components | { Arrow?: elementType, Popper?: elementType, Tooltip?: elementType, Transition?: elementType } | {} | 用於內部每個 slot 的元件。 |
componentsProps | { arrow?: object, popper?: object, tooltip?: object, transition?: object } | {} | slot 元件的額外 props。您可以覆寫現有的 props 或新增 props。 |
describeChild | bool | false | 如果 |
disableFocusListener | bool | false | 不回應 focus-visible 事件。 |
disableHoverListener | bool | false | 不回應 hover 事件。 |
disableInteractive | bool | false | 使 tooltip 無法互動,亦即,當使用者在 |
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。 |
leaveDelay | number | 0 | 在隱藏 tooltip 之前等待的毫秒數。此 prop 不會影響 leave touch delay ( |
leaveTouchDelay | number | 1500 | 使用者停止觸碰元素後多少毫秒才會隱藏 tooltip。 |
onClose | func | - | 當元件請求關閉時觸發的回呼。 簽名: function(event: React.SyntheticEvent) => void
|
onOpen | func | - | 當元件請求開啟時觸發的回呼。 簽名: function(event: React.SyntheticEvent) => void
|
open | bool | - | 若為 |
placement | 'auto-end' | 'auto-start' | 'auto' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | 'bottom' | Tooltip 位置。 |
PopperComponent | elementType | - | 用於 popper 的元件。 |
PopperProps | object | {} | 套用至 |
slotProps | { arrow?: func | object, popper?: func | object, tooltip?: func | object, transition?: func | object } | {} | 用於內部每個 slot 的 props。 |
slots | { arrow?: elementType, popper?: elementType, tooltip?: elementType, transition?: elementType } | {} | 用於內部每個 slot 的元件。 |
sx | Array<func | object | bool> | func | object | - | 系統 prop,允許定義系統覆寫以及額外的 CSS 樣式。 請參閱 `sx` 頁面 以取得更多詳細資訊。 |
title | node | - | Tooltip 標題。零長度標題字串、undefined、null 和 false 永遠不會顯示。 |
TransitionComponent | elementType | - | 用於 transition 的元件。請遵循此指南以深入瞭解此元件的需求。 |
TransitionProps | object | {} | 套用至 transition 元素的 Props。預設情況下,此元素是以此 |
ref
會轉發到根元素。主題預設 props
您可以使用 MuiTooltip
來變更此元件的預設 props 透過主題。
Slot 名稱 | 類別名稱 | 預設元件 | 描述 |
---|---|---|---|
popper | .MuiTooltip-popper | Popper | 用於 popper 的元件。 |
transition | Grow | 用於 transition 的元件。請遵循此指南以深入瞭解此元件的需求。 | |
tooltip | .MuiTooltip-tooltip | 用於 tooltip 的元件。 | |
arrow | .MuiTooltip-arrow | 用於箭頭的元件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時,它們會套用至元件的 slot。
類別名稱 | 規則名稱 | 描述 |
---|---|---|
.MuiTooltip-popperArrow | popperArrow | 若 arrow={true} ,則套用至 Popper 元件的樣式。 |
.MuiTooltip-popperClose | popperClose | 除非 tooltip 開啟,否則套用至 Popper 元件的樣式。 |
.MuiTooltip-popperInteractive | popperInteractive | 除非 disableInteractive={true} ,否則套用至 Popper 元件的樣式。 |
.MuiTooltip-tooltipArrow | tooltipArrow | 若 arrow={true} ,則套用至 tooltip (標籤包裝器) 元素的樣式。 |
.MuiTooltip-tooltipPlacementBottom | tooltipPlacementBottom | 若 placement 包含 "bottom",則套用至 tooltip (標籤包裝器) 元素的樣式。 |
.MuiTooltip-tooltipPlacementLeft | tooltipPlacementLeft | 若 placement 包含 "left",則套用至 tooltip (標籤包裝器) 元素的樣式。 |
.MuiTooltip-tooltipPlacementRight | tooltipPlacementRight | 若 placement 包含 "right",則套用至 tooltip (標籤包裝器) 元素的樣式。 |
.MuiTooltip-tooltipPlacementTop | tooltipPlacementTop | 若 placement 包含 "top",則套用至 tooltip (標籤包裝器) 元素的樣式。 |
.MuiTooltip-touch | touch | 若 tooltip 是透過觸控開啟,則套用至 tooltip (標籤包裝器) 元素的樣式。 |
您可以使用以下其中一種自訂選項來覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為元件的
styleOverrides
屬性的一部分。
原始碼
如果您在此頁面中找不到資訊,請考慮查看元件的實作以取得更多詳細資訊。