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

TooltipAPI

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

範例

Import

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

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

Props

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

Tooltip 參考元素。

arrowboolfalse

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

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
'neutral'

元件的顏色。它支援適用於此元件的 theme colors。

若要瞭解如何新增自己的顏色,請查看Themed components—Extend colors

componentelementType-

用於根節點的元件。可以是字串 (使用 HTML 元素) 或元件。

describeChildboolfalse

title 作為可存取的描述,則設定為 true。預設情況下,title 作為子項的可存取標籤。

direction'ltr'
| 'rtl'
'ltr'

文字方向。

disableFocusListenerboolfalse

不回應焦點可見事件。

disableHoverListenerboolfalse

不回應 hover 事件。

disableInteractiveboolfalse

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

disablePortalboolfalse

children 將位於父元件的 DOM 階層之下。

disableTouchListenerboolfalse

不回應長按觸控事件。

enterDelaynumber100

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

enterNextDelaynumber0

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

enterTouchDelaynumber700

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

followCursorboolfalse

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

idstring-

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

keepMountedboolfalse

始終將 children 保留在 DOM 中。此 prop 在 SEO 情況下或當您想要最大化 Popper 的回應性時非常有用。

leaveDelaynumber0

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

leaveTouchDelaynumber1500

使用者停止觸碰元素後,隱藏 tooltip 前要等待的毫秒數。

modifiersArray<{ 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」中。
modifier 是一個函式,每次 Popper.js 需要計算 popper 的位置時都會呼叫該函式。因此,modifier 的效能應該非常高,以避免瓶頸。若要瞭解如何建立 modifier,請閱讀 modifiers 文件

onClosefunc-

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

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

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

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

若為 true,則顯示元件。

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 以取得更多詳細資訊。

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

系統 prop,可讓您定義系統覆寫以及額外的 CSS 樣式。

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

titlenode-

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

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
'solid'

要使用的global variant

若要瞭解如何新增自己的 variants,請查看Themed components—Extend variants

ref 轉發到根元素。

Theme default props

您可以使用 JoyTooltip 透過 theme 變更此元件的預設 props。

Slots

若要瞭解如何自訂 slot,請查看覆寫元件結構指南。

Slot 名稱Class name預設元件描述
root.MuiTooltip-root'div'呈現 root 的元件。
arrow.MuiTooltip-arrow'span'呈現箭頭的元件。

CSS classes

這些 class name 對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時套用至元件的 slots。

Class nameRule name描述
.MuiTooltip-colorContextcolorContext當觸發顏色反轉時,套用至根元素的 Class name。
.MuiTooltip-colorDangercolorDangercolor="danger",則套用至根元素的 Class name。
.MuiTooltip-colorNeutralcolorNeutralcolor="neutral",則套用至根元素的 Class name。
.MuiTooltip-colorPrimarycolorPrimarycolor="primary",則套用至根元素的 Class name。
.MuiTooltip-colorSuccesscolorSuccesscolor="success",則套用至根元素的 Class name。
.MuiTooltip-colorWarningcolorWarningcolor="warning",則套用至根元素的 Class name。
.MuiTooltip-placementBottomplacementBottomplacement 包含 "bottom",則套用至根元素的 Class name。
.MuiTooltip-placementLeftplacementLeftplacement 包含 "left",則套用至根元素的 Class name。
.MuiTooltip-placementRightplacementRightplacement 包含 "right",則套用至根元素的 Class name。
.MuiTooltip-placementTopplacementTopplacement 包含 "top",則套用至根元素的 Class name。
.MuiTooltip-sizeLgsizeLgsize="lg",則套用至根元素的 Class name。
.MuiTooltip-sizeMdsizeMdsize="md",則套用至根元素的 Class name。
.MuiTooltip-sizeSmsizeSmsize="sm",則套用至根元素的 Class name。
.MuiTooltip-tooltipArrowtooltipArrowarrow={true},則套用至根元素的 Class name。
.MuiTooltip-touchtouch若 tooltip 是透過觸控開啟,則套用至根元素的 Class name。
.MuiTooltip-variantOutlinedvariantOutlinedvariant="outlined",則套用至根元素的 Class name。
.MuiTooltip-variantPlainvariantPlainvariant="plain",則套用至根元素的 Class name。
.MuiTooltip-variantSoftvariantSoftvariant="soft",則套用至根元素的 Class name。
.MuiTooltip-variantSolidvariantSolidvariant="solid",則套用至根元素的 Class name。

您可以使用下列自訂選項之一覆寫元件的樣式

原始碼

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