ChartsTooltipAPI
React ChartsTooltip 元件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
示範
導入
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
// or
import { ChartsTooltip } from '@mui/x-charts';
// or
import { ChartsTooltip } from '@mui/x-charts-pro';閱讀此關於最小化 bundle 大小的指南，了解它們之間的差異。
| 名稱 | 類型 | 預設 | 描述 |
|---|---|---|---|
| axisContent | elementType | - | 當 trigger 設定為 'axis' 時，覆寫工具提示內容的元件。 |
| classes | object | - | 覆寫或擴展應用於元件的樣式。 詳情請參閱下方的 CSS 類別 API。 |
| itemContent | elementType | - | 當 trigger 設定為 'item' 時，覆寫工具提示內容的元件。 |
| slotProps | object | {} | 用於每個元件插槽的 props。 |
| slots | object | {} | 可覆寫的元件插槽。 詳情請參閱下方的 Slots API。 |
| trigger | 'axis' | 'item' | 'none' | 'axis' | 選擇要顯示的工具提示種類 - 'item'：顯示滑鼠下方項目的資料。 - 'axis'：顯示與滑鼠懸停的 x 值相關聯的值 - 'none'：不顯示工具提示 |
元件無法持有 ref。
| 插槽名稱 | 類別名稱 | 預設元件 | 描述 |
|---|---|---|---|
| axisContent | DefaultChartsAxisTooltipContent | 用於顯示由軸事件觸發的工具提示內容的自訂元件。 | |
| itemContent | DefaultChartsItemTooltipContent | 用於顯示由項目事件觸發的工具提示內容的自訂元件。 | |
| popper | ChartsTooltipRoot | 工具提示 popper 的自訂元件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiChartsTooltip-cell | cell | 應用於 cell 元素的樣式。 |
| .MuiChartsTooltip-labelCell | labelCell | 應用於 labelCell 元素的樣式。 |
| .MuiChartsTooltip-mark | mark | 應用於 mark 元素的樣式。 |
| .MuiChartsTooltip-markCell | markCell | 應用於 markCell 元素的樣式。 |
| .MuiChartsTooltip-paper | paper | 應用於 paper 元素的樣式。 |
| .MuiChartsTooltip-root | root | 應用於 root 元素的樣式。 |
| .MuiChartsTooltip-row | row | 應用於 row 元素的樣式。 |
| .MuiChartsTooltip-table | table | 應用於 table 元素的樣式。 |
| .MuiChartsTooltip-valueCell | valueCell | 應用於 valueCell 元素的樣式。 |
您可以使用以下自訂選項之一來覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中，使用規則名稱作為元件
styleOverrides屬性的一部分。
原始碼
如果您在本頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。