Tooltip Plugin Reference

The Tooltip plugin implements a tooltip that shows information about a point. The tooltip appears when a user hovers the mouse pointer over a series point.

Import

Use the following statement to import the plugin:

import { Tooltip } from '@devexpress/dx-react-chart-material-ui';
//import { Tooltip } from '@devexpress/dx-react-chart-bootstrap4';

User Reference

Dependencies

Properties

Name Type Default Description
defaultTargetItem? SeriesRef   An item for which the tooltip is displayed initially.
targetItem? SeriesRef   An item for which the tooltip is displayed.
onTargetItemChange? (target: SeriesRef) => void   A function that is executed when the target item changes.
overlayComponent ComponentType<Tooltip.OverlayProps>   A component that renders the tooltip.
contentComponent ComponentType<Tooltip.ContentProps>   A component that renders the tooltip content.

Interfaces

Tooltip.OverlayProps

Describes properties passed to a component that renders the tooltip.

Field Type Description
target {getBoundingClientRect: () => ClientRect, clientHeight: number, clientWidth: number} An object that provides an API to position the tooltip.
children ReactNode A React node used to render the tooltip’s content.

Tooltip.ContentProps

Describes properties passed to a component that renders the tooltip’s content.

Field Type Description
text string The component’s text.
targetItem SeriesRef An item for which the tooltip is displayed.

Plugin Components

Name Properties Description
Tooltip.Overlay Tooltip.OverlayProps A component that renders the tooltip.
Tooltip.Content Tooltip.ContentProps A component that renders the tooltip’s content.