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.
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';| 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. |
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. |
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. |
Describes properties passed to a component that renders the tooltip's arrow.
| Field | Type | Description |
|---|---|---|
| placement | 'top' | 'right' | The tooltip's placement. |
Describes properties passed to a component that renders the tooltip's sheet.
| Field | Type | Description |
|---|---|---|
| children | ReactNode | The sheet's children. |
| 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. |