Skip to content

Commit

Permalink
add tooltip docs
Browse files Browse the repository at this point in the history
  • Loading branch information
amcdnl committed Jan 15, 2020
1 parent d70e4e3 commit 530e8e9
Showing 1 changed file with 84 additions and 0 deletions.
84 changes: 84 additions & 0 deletions docs/advanced/Tooltips.story.mdx
Original file line number Diff line number Diff line change
@@ -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} />

0 comments on commit 530e8e9

Please sign in to comment.