ChartsTooltipContainer API
API reference docs for the React ChartsTooltipContainer component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
// or
import { ChartsTooltipContainer } from '@mui/x-charts';
// or
import { ChartsTooltipContainer } from '@mui/x-charts-pro';
Learn about the difference by reading this guide on minimizing bundle size.
Name | Type | Default | Description |
---|---|---|---|
anchorEl | HTML element | object | func | - | An HTML element, virtualElement, or a function that returns either. It's used to set the position of the popper. The return value will passed as the reference object of the Popper instance. |
children | node | - | Popper render function or node. |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
component | elementType | - | The component used for the root node. Either a string to use a HTML element or a component. |
components | { Root?: elementType } | {} | The components used for each slot inside the Popper. Either a string to use a HTML element or a component. |
componentsProps | { root?: func | object } | {} | The props used for each slot inside the Popper. |
container | (props, propName) => {
if (props[propName] == null) {
return new Error(`Prop '${propName}' is required but wasn't specified`);
}
if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
return new Error(`Expected prop '${propName}' to be of type Element`);
}
return null;
} | func | - | An HTML element or function that returns one. The |
disablePortal | bool | false | The |
keepMounted | bool | false | Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper. |
modifiers | Array<{ 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 is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers". |
open | bool | - | If |
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' | Popper placement. |
popperOptions | { modifiers?: array, onFirstUpdate?: func, 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', strategy?: 'absolute' | 'fixed' } | {} | Options provided to the |
popperRef | func | { current?: { destroy: func, forceUpdate: func, setOptions: func, state: { attributes: object, elements: object, modifiersData: object, options: object, orderedModifiers: Array<object>, 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', rects: object, reset: bool, scrollParents: object, strategy: 'absolute' | 'fixed', styles: object }, update: func } } | - | A ref that points to the used popper instance. |
slotProps | object | {} | The props used for each slot inside the Popper. |
slots | object | {} | The components used for each slot inside the Popper. Either a string to use a HTML element or a component. See Slots API below for more details. |
sx | Array<func | object | bool> | func | object | - | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
transition | bool | false | Help supporting a react-transition-group/Transition component. |
trigger | 'axis' | 'item' | 'none' | 'axis' | 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 |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Class name | Rule name | Description |
---|---|---|
.MuiChartsTooltipContainer-axisValueCell | axisValueCell | Styles applied to the axisValueCell element. Only available for axis tooltip. |
.MuiChartsTooltipContainer-cell | cell | Styles applied to the cell element. |
.MuiChartsTooltipContainer-labelCell | labelCell | Styles applied to the labelCell element. |
.MuiChartsTooltipContainer-mark | mark | Styles applied to the mark element. |
.MuiChartsTooltipContainer-markCell | markCell | Styles applied to the markCell element. |
.MuiChartsTooltipContainer-paper | paper | Styles applied to the paper element. |
.MuiChartsTooltipContainer-root | root | Styles applied to the root element. |
.MuiChartsTooltipContainer-row | row | Styles applied to the row element. |
.MuiChartsTooltipContainer-table | table | Styles applied to the table element. |
.MuiChartsTooltipContainer-valueCell | valueCell | Styles applied to the valueCell element. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.