diff --git a/docs/advanced/Tooltips.story.mdx b/docs/advanced/Tooltips.story.mdx new file mode 100644 index 00000000..9fe5ad80 --- /dev/null +++ b/docs/advanced/Tooltips.story.mdx @@ -0,0 +1,84 @@ +import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks'; +import { TooltipArea, Tooltip } from '../../src'; + +<Meta title="Docs|Advanced/Tooltips" /> + +# Tooltips + +--- + +REAVIZ has two types of tooltips: + +- `TooltipArea` - Tooltip positioning based on position calculations of data. +- `Tooltip` - Tooltip positioning based on element anchors. + +## Tooltip Area +The tooltip area component is useful for when: + +- Dealing with multi-series charts (bar/line/area) +- Dealing with time series data (line/area) +- Dealing with difficult to hit points (small bar chart lines) + +### Example +The Sonar Chart is a good example of a custom tooltip area: + +```jsx +<StackedBarSeries + type="stackedDiverging" + tooltip={ + <TooltipArea + tooltip={ + <ChartTooltip + followCursor={true} + modifiers={{ + offset: '5px, 5px' + }} + content={(data, color) => ( + <TooltipTemplate + color={color} + value={{ + x: formatValue(data.x), + y: `${formatValue(Math.abs(data.data[0].y))}` + }} + /> + )} + /> + } + /> + } +/> +``` + +In the example above, the component recieves a custom `TooltipArea` where it overrides +the `tooltip` property passing its own `content`. + +### API +#### [TooltipArea](https://github.com/jask-oss/reaviz/blob/master/src/common/Tooltip/TooltipArea.tsx) +<Props of={TooltipArea} /> + +## Tooltip +The tooltip component is used for simple position relative to a element. This is ideal +for most charts. + +### Example +The Calendar Heatmap is a good example of custom tooltip: + +```jsx +<HeatmapCell + tooltip={ + <ChartTooltip + content={d => + `${formatValue(d.data.metadata.date)} ∙ ${formatValue( + d.data.value + )}` + } + /> + } +/> +``` + +In this example above, the component overrides the tooltip to format the date for a Calendar format. + +### API +#### [Tooltip](https://github.com/jask-oss/reaviz/blob/master/src/common/Tooltip/Tooltip.tsx) +<Props of={Tooltip} />