Document text tooltips (Docs) (#597)

Author: devalog

fern/products/docs/pages/component-library/default-components/tooltips.mdx

@@ -1,24 +1,16 @@
 ---
-title: 'Tooltips'
-description: 'Add interactive tooltips to your documentation.'
+title: Tooltips
+description: Add interactive tooltips to your documentation.
 ---
 
 The Tooltips component provides a way to display additional information when users hover over an element. This is particularly useful for providing context or explanations without cluttering the interface.
 
-## Tooltips in CodeBlocks
+## Tooltips in code
 
-## Properties
-
-<ParamField path="data" type="object" required={true}>
-  Key-value pairs where the values are displayed in your code blocks.
-</ParamField>
-
-<ParamField path="tooltips" type="object" required={false}>
-  Key-value pairs where the values are displayed in the tooltips. The Key for `tooltips` must match the Key for `data`.
-</ParamField>
-
-
-## Examples
+The code tooltip component allows you to provide contextual information for variables and
+values within your code examples. When users hover over highlighted code, they
+can see explanations, documentation links, or additional context without leaving
+the code example.
 
 <Tabs>
 <Tab title="Basic Tooltip">
@@ -138,4 +130,52 @@ const api = axios.create({
 </Tab>
 </Tabs>
 
-## Tooltips for Text
+### Properties
+
+<ParamField path="data" type="object" required={true}>
+  Key-value pairs where the values are displayed in your code blocks.
+</ParamField>
+
+<ParamField path="tooltips" type="object" required={false}>
+  Key-value pairs where the values are displayed in the tooltips. The Key for `tooltips` must match the Key for `data`.
+</ParamField>
+
+## Tooltips for text
+
+The text tooltip component allows you to provide contextual information for any text element in your documentation. When users hover over them, they can see definitions or additional context without leaving the current page.
+
+<Tabs>
+<Tab title="Text tooltips">
+Documentation becomes more interactive when you add <Tooltip tip="A simple tooltip for basic explanations">tooltips</Tooltip> to key terms. You can include <Tooltip tip={<div><strong>Rich Content</strong><br /><br />Supports HTML formatting, <a href="https://buildwithfern.com/" target="_blank">external links</a>, and <code>inline code</code></div>} side="right">rich content</Tooltip> with custom positioning for more detailed explanations.
+</Tab>
+<Tab title="Markdown">
+```tsx
+Documentation becomes more interactive when you add <Tooltip tip="A simple tooltip for basic explanations">tooltips</Tooltip> to key terms. 
+
+You can include <Tooltip 
+  tip={
+    <div>
+      <strong>Rich Content</strong>
+      <br /><br />
+      Supports HTML formatting, <a href="https://buildwithfern.com/" target="_blank">external links</a>, and <code>inline code</code>
+    </div>
+  } 
+  side="right"
+>rich content</Tooltip> with custom positioning for more detailed explanations.
+```
+</Tab>
+</Tabs>
+
+### Properties
+
+<ParamField path="tip" type="string | ReactNode" required={true}>
+  The content to display in the tooltip. Can be a simple string or React component for more complex content.
+</ParamField>
+
+<ParamField path="side" type="'top' | 'right' | 'bottom' | 'left'" required={false} default="top">
+  Controls which side of the element the tooltip appears on.
+</ParamField>
+
+<ParamField path="sideOffset" type="number" required={false} default={4}>
+  The distance in pixels between the tooltip and the trigger element.
+</ParamField>