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} />