diff --git a/packages/docs/pages/tooltip.tsx b/packages/docs/pages/tooltip.tsx
index 5757743e4..4767af025 100644
--- a/packages/docs/pages/tooltip.tsx
+++ b/packages/docs/pages/tooltip.tsx
@@ -2,7 +2,7 @@ import { Box, Button, Flex, Grid, H1, Panel, Text, Tooltip } from '@bigcommerce/
import { WarningIcon } from '@bigcommerce/big-design-icons';
import React from 'react';
-import { Code, CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
import { TooltipPropTable } from '../PropTables';
const TooltipPage = () => {
@@ -93,7 +93,113 @@ const TooltipPage = () => {
<>
Tooltip
-
+
+
+ Tooltips
contain information to help users understand actions or page elements.
+
+ When to use:
+
+
+ They are short, and triggered by a user hovering with their keyboard or mouse over a UI element.
+
+ They are used to help reduce information density on otherwise crowded pages or forms.
+
+ Use tooltips to explain columns in a table, explain buttons (e.g. add, edit) on page or alongisde a help
+ icon.
+
+
+
+
+
+ (
+
+ {/* jsx-to-string:start */}
+ Hover} placement="right">
+ Tooltip Content
+
+ {/* jsx-to-string:end */}
+
+ ),
+ },
+ {
+ id: 'anchor',
+ title: 'Anchor',
+ render: () => (
+ <>
+
+ Tooltips can wrap any Element
. Tooltip will show on hover.
+
+
+
+ {/* jsx-to-string:start */}
+
+
+ Button} placement="right">
+ Tooltip Content
+
+
+
+
+ } placement="right">
+ Tooltip Content
+
+
+
+ Span} placement="right">
+ Tooltip Content
+
+
+
+ {/* jsx-to-string:end */}
+
+ >
+ ),
+ },
+ {
+ id: 'placement',
+ title: 'Placement',
+ render: () => (
+ <>
+
+ Tooltip can be anchored in different directions with the placement
property. It
+ will automatically find a position if there's not enough space in the chosen direction.
+
+
+
+ {/* jsx-to-string:start */}
+
+ Right} placement="right">
+ Tooltip Content
+
+ Top} placement="top">
+ Tooltip Content
+
+ Left} placement="left">
+ Tooltip Content
+
+ Bottom} placement="bottom">
+ Tooltip Content
+
+
+
+ {/* jsx-to-string:end */}
+
+ >
+ ),
+ },
+ ]}
+ />
+
+
+
+
+
>
);
};