Document tooltip custom styling (Docs) (#601)

Author: devalog

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

@@ -140,6 +140,17 @@ const api = axios.create({
   Key-value pairs where the values are displayed in the tooltips. The Key for `tooltips` must match the Key for `data`.
 </ParamField>
 
+### Style a code tooltip
+
+To customize code tooltips, target the `.fern-mdx-tooltip-content` selector. You can override CSS variables or add any custom styles:
+
+```css
+.fern-mdx-tooltip-content {
+  --tooltip-padding-x: 1.5rem; /* Horizontal padding inside tooltip */
+  /* Add custom styles here */
+}
+```
+
 ## 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.
@@ -178,4 +189,20 @@ You can include <Tooltip
 
 <ParamField path="sideOffset" type="number" required={false} default={4}>
   The distance in pixels between the tooltip and the trigger element.
-</ParamField>
+</ParamField>
+
+
+### Style a text tooltip
+
+To customize text tooltips, target the `.fern-mdx-tooltip-trigger` selector. You can override CSS variables for common customizations or add any custom styles:
+
+```css
+.fern-mdx-tooltip-trigger {
+  --tooltip-underline-color: blue; /* Color of the underline in default state */
+  --tooltip-underline-hover-color: green; /* Color of the underline on hover */
+  --tooltip-underline-thickness: 2px; /* Thickness of the underline */
+  --tooltip-underline-offset: 2px; /* Distance between text and underline */
+  --tooltip-transition-duration: 0.10s; /* Hover transition speed */
+  /* Add custom styles here */
+}
+```