diff --git a/docs/src/pages/components/TooltipIcon.svx b/docs/src/pages/components/TooltipIcon.svx
index 3d23e343..4bdfeae6 100644
--- a/docs/src/pages/components/TooltipIcon.svx
+++ b/docs/src/pages/components/TooltipIcon.svx
@@ -5,12 +5,18 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-## Default ("bottom" direction, "center" aligned)
+`TooltipIcon` displays contextual information when users hover over or focus on an icon. It's ideal for providing additional context about icons or actions in your interface.
+
+## Default
+
+Display a tooltip with the default bottom-center alignment.
 
 <TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
 
 ## Directions
 
+Position the tooltip in different directions and alignments using the `direction` and `align` props.
+
 <TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
 <TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
 <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
@@ -18,7 +24,7 @@
 
 ## Custom tooltip text
 
-Use the "text" slot to customize the tooltip text.
+Use the `tooltipText` slot to customize the tooltip content with additional styling.
 
 <TooltipIcon icon={Carbon}>
   <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
@@ -26,4 +32,6 @@ Use the "text" slot to customize the tooltip text.
 
 ## Disabled state
 
+Set `disabled` to `true` to prevent user interaction with the tooltip.
+
 <TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
\ No newline at end of file