跳到主要內容跳到主要內容

TooltipAPI

React Tooltip 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

Import

import Tooltip from '@mui/material/Tooltip';
// or
import { Tooltip } from '@mui/material';

閱讀關於最小化 bundle size 的指南,以了解差異。

Props

原生元件的 Props 也可使用。

名稱類型預設值描述
children*element-

Tooltip 參考元素。

arrowboolfalse

若為 true,則在 tooltip 上新增箭頭。

classesobject-

覆寫或擴充套用至元件的樣式。

請參閱下方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。

describeChildboolfalse

如果 title 作為可存取的描述,則設為 true。預設情況下,title 作為子元件的可存取標籤。

disableFocusListenerboolfalse

不回應 focus-visible 事件。

disableHoverListenerboolfalse

不回應 hover 事件。

disableInteractiveboolfalse

使 tooltip 無法互動,亦即,當使用者在 leaveDelay 過期之前 hover 在 tooltip 上時,tooltip 將會關閉。

disableTouchListenerboolfalse

不回應長按觸控事件。

enterDelaynumber100

在顯示 tooltip 之前等待的毫秒數。此 prop 不會影響 enter touch delay (enterTouchDelay)。

enterNextDelaynumber0

當最近已開啟一個 tooltip 時,在顯示 tooltip 之前等待的毫秒數。

enterTouchDelaynumber700

使用者必須觸碰元素多少毫秒才會顯示 tooltip。

followCursorboolfalse

若為 true,tooltip 會跟隨游標在包裝的元素上移動。

idstring-

此 prop 用於協助實作可存取性邏輯。如果您未提供此 prop。它會回復為隨機產生的 id。

leaveDelaynumber0

在隱藏 tooltip 之前等待的毫秒數。此 prop 不會影響 leave touch delay (leaveTouchDelay)。

leaveTouchDelaynumber1500

使用者停止觸碰元素後多少毫秒才會隱藏 tooltip。

onClosefunc-

當元件請求關閉時觸發的回呼。

簽名:function(event: React.SyntheticEvent) => void
  • event 回呼的事件來源。
onOpenfunc-

當元件請求開啟時觸發的回呼。

簽名:function(event: React.SyntheticEvent) => void
  • event 回呼的事件來源。
openbool-

若為 true,則會顯示元件。

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 位置。

PopperComponentelementType-

用於 popper 的元件。

PopperPropsobject{}

套用至 Popper 元素的 Props。

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 的元件。

sxArray<func
| object
| bool>
| func
| object
-

系統 prop,允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面 以取得更多詳細資訊。

titlenode-

Tooltip 標題。零長度標題字串、undefined、null 和 false 永遠不會顯示。

TransitionComponentelementType-

用於 transition 的元件。請遵循此指南以深入瞭解此元件的需求。

TransitionPropsobject{}

套用至 transition 元素的 Props。預設情況下,此元素是以此Transition 元件為基礎。

ref 會轉發到根元素。

主題預設 props

您可以使用 MuiTooltip 來變更此元件的預設 props 透過主題

Slots

Slot 名稱類別名稱預設元件描述
popper.MuiTooltip-popperPopper用於 popper 的元件。
transitionGrow用於 transition 的元件。請遵循此指南以深入瞭解此元件的需求。
tooltip.MuiTooltip-tooltip用於 tooltip 的元件。
arrow.MuiTooltip-arrow用於箭頭的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時,它們會套用至元件的 slot。

類別名稱規則名稱描述
.MuiTooltip-popperArrowpopperArrowarrow={true},則套用至 Popper 元件的樣式。
.MuiTooltip-popperClosepopperClose除非 tooltip 開啟,否則套用至 Popper 元件的樣式。
.MuiTooltip-popperInteractivepopperInteractive除非 disableInteractive={true},否則套用至 Popper 元件的樣式。
.MuiTooltip-tooltipArrowtooltipArrowarrow={true},則套用至 tooltip (標籤包裝器) 元素的樣式。
.MuiTooltip-tooltipPlacementBottomtooltipPlacementBottomplacement 包含 "bottom",則套用至 tooltip (標籤包裝器) 元素的樣式。
.MuiTooltip-tooltipPlacementLefttooltipPlacementLeftplacement 包含 "left",則套用至 tooltip (標籤包裝器) 元素的樣式。
.MuiTooltip-tooltipPlacementRighttooltipPlacementRightplacement 包含 "right",則套用至 tooltip (標籤包裝器) 元素的樣式。
.MuiTooltip-tooltipPlacementToptooltipPlacementTopplacement 包含 "top",則套用至 tooltip (標籤包裝器) 元素的樣式。
.MuiTooltip-touchtouch若 tooltip 是透過觸控開啟,則套用至 tooltip (標籤包裝器) 元素的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

原始碼

如果您在此頁面中找不到資訊,請考慮查看元件的實作以取得更多詳細資訊。