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.
arrowComponent ComponentType<Tooltip.ArrowProps>   A component that renders the tooltip arrow.
sheetComponent ComponentType<Tooltip.SheetProps>   A component that renders the tooltip sheet.

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.  
arrowComponent ComponentType<Tooltip.ArrowProps>   A component that renders the tooltip arrow.

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.

Tooltip.ArrowProps

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

Field Type Description
placement ‘top’ | ‘right’ The tooltip’s placement.

Tooltip.SheetProps

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

Field Type Description
children ReactNode The sheet’s children.

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.
Tooltip.Arrow Tooltip.ArrowProps A component that renders the tooltip arrow.
Tooltip.Sheet Tooltip.SheetProps A component that renders the tooltip sheet.