ChartsTooltipAPI

React ChartsTooltip 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

图表 - 工具提示

导入

import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
// or
import { ChartsTooltip } from '@mui/x-charts';
// or
import { ChartsTooltip } from '@mui/x-charts-pro';

通过阅读有关最小化 bundle size 的指南，了解差异。

Props

名称	类型	默认值	描述
axisContent	elementType	-	当 trigger 设置为 'axis' 时，用于覆盖工具提示内容的组件。已弃用－请改用 slots.axisContent
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
itemContent	elementType	-	当 trigger 设置为 'item' 时，用于覆盖工具提示内容的组件。已弃用－请改用 slots.itemContent
slotProps	object	{}	用于每个组件插槽的 props。
slots	object	{}	可覆盖的组件插槽。有关更多详细信息，请参阅下面的 Slots API。
trigger	'axis' \| 'item' \| 'none'	'axis'	选择要显示的工具提示类型 - 'item'：显示鼠标下方项目的数据。 - 'axis'：显示与悬停的 x 值关联的值 - 'none'：不显示工具提示

该组件不能持有 ref。

Slots

插槽名称	默认组件	描述
axisContent	`DefaultChartsAxisTooltipContent`	用于显示由轴事件触发的工具提示内容的自定义组件。
itemContent	`DefaultChartsItemTooltipContent`	用于显示由项目事件触发的工具提示内容的自定义组件。
popper	`ChartsTooltipRoot`	用于工具提示 popper 的自定义组件。

CSS 类

这些类名对于使用 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 属性的一部分。

源代码

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。