Skip to content

ChartsTooltip API

API reference docs for the React ChartsTooltip component. Learn about the props, CSS, and other APIs of this exported module.

Component demos

Import

import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
// or
import { ChartsTooltip } from '@mui/x-charts';
Learn about the difference by reading this guide on minimizing bundle size.

Props

axisContent

Component to override the tooltip content when triger is set to 'axis'.

Type:elementType

classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:object

itemContent

Component to override the tooltip content when triger is set to 'item'.

Type:elementType

slotProps

The props used for each component slot.

Type:object

Default:{}

slots

Overridable component slots.

Type:object

Default:{}

trigger

Select the kind of tooltip to display - 'item': Shows data about the item below the mouse. - 'axis': Shows values associated with the hovered x value - 'none': Does not display tooltip

Type:'axis'
| 'item'
| 'none'

Default:'item'

The component cannot hold a ref.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiChartsTooltip-root

Styles applied to the root element.

Rule name:root

.MuiChartsTooltip-markCell

Styles applied to the markCell element.

Rule name:markCell

.MuiChartsTooltip-labelCell

Styles applied to the labelCell element.

Rule name:labelCell

.MuiChartsTooltip-valueCell

Styles applied to the valueCell element.

Rule name:valueCell


You can override the style of the component using one of these customization options:

Slots

axisContent
itemContent
popper