diff --git a/packages/docs/pages/tooltip.tsx b/packages/docs/pages/tooltip.tsx
index 5757743e4..4dc995acd 100644
--- a/packages/docs/pages/tooltip.tsx
+++ b/packages/docs/pages/tooltip.tsx
@@ -2,98 +2,121 @@ 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 = () => {
- const items = [
- {
- id: 'examples',
- title: 'Examples',
- render: () => (
- <>
-
-
- Tooltips contain information to help users understand actions or page elements. They are short, and
- triggered by a user hovering with their keyboard or mouse over a UI element.
-
-
- {/* jsx-to-string:start */}
- Hover} placement="right">
- Tooltip Content
-
- {/* jsx-to-string:end */}
-
-
-
-
- Tooltips can wrap any Element
. Tooltip will show on hover.
-
+ return (
+ <>
+ Tooltip
-
- {/* jsx-to-string:start */}
-
-
- Button} placement="right">
- Tooltip Content
-
-
+
+
+ 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.
+
+
+
-
- } placement="right">
+
+ (
+
+ {/* jsx-to-string:start */}
+ Hover} placement="right">
Tooltip Content
-
-
- Span} placement="right">
- Tooltip Content
-
-
-
- {/* jsx-to-string:end */}
-
-
-
-
- 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:end */}
+
+ ),
+ },
+ {
+ id: 'anchor',
+ title: 'Anchor',
+ render: () => (
+ <>
+
+ Tooltips can wrap any Element
. Tooltip will show on hover.
+
-
- {/* 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:start */}
+
+
+ Button} placement="right">
+ Tooltip Content
+
+
- {/* jsx-to-string:end */}
-
-
- >
- ),
- },
- {
- id: 'props',
- title: 'Props',
- render: () => ,
- },
- ];
+
+ } 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.
+
- return (
- <>
-
Tooltip
+
+ {/* 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 */}
+
+ >
+ ),
+ },
+ ]}
+ />
+
-
+
+
+
>
);
};