docs: fix: tooltip placement and tooltip types

themesberg · Jun 30, 2024 · 9f28c30 · 9f28c30
1 parent 31a63b2
commit 9f28c30
Showing 1 changed file with 21 additions and 10 deletions.
diff --git a/src/routes/docs/components/tooltip.md b/src/routes/docs/components/tooltip.md
@@ -61,10 +61,12 @@ You can use choose between dark and light version styles for the tooltip compone
   let type = 'dark';
 </script>
 
-<Button id="type-1" on:mouseenter={()=> type='light'}>Light tooltip</Button>
-<Button id="type-2" on:mouseenter={()=> type='auto'}>Default tooltip</Button>
-<Button id="type-3" on:mouseenter={()=> type='dark'}>Dark tooltip</Button>
-<Tooltip {type} triggeredBy="[id^='type-']">Tooltip content</Tooltip>
+<Button id="type-1" >Light tooltip</Button>
+<Tooltip type='light' triggeredBy="#type-1">Tooltip content</Tooltip>
+<Button id="type-2" >Default tooltip</Button>
+<Tooltip type='auto' triggeredBy="#type-2">Tooltip content</Tooltip>
+<Button id="type-3" >Dark tooltip</Button>
+<Tooltip type='dark' triggeredBy="#type-3">Tooltip content</Tooltip>
 ```
 
 ## Placement
@@ -79,12 +81,21 @@ The positioning of the tooltip element relative to the triggering element (eg. b
   let placement = 'left';
 </script>
 
-<Button id="placement-1" on:mouseenter={()=> placement='left'}>Tooltip left</Button>
-<Button id="placement-2" on:mouseenter={()=> placement='top'}>Tooltip top</Button>
-<Button id="placement-3" on:mouseenter={()=> placement='bottom'}>Tooltip bottom</Button>
-<Button id="placement-4" on:mouseenter={()=> placement='right'}>Tooltip right</Button>
-<Tooltip triggeredBy="[id^='placement-']" {placement}>
-  Tooltip content - {placement}
+<Button id="placement-1">Tooltip left</Button>
+<Tooltip triggeredBy="#placement-1" placement='left'>
+  Tooltip content - Left
+</Tooltip>
+<Button id="placement-2">Tooltip top</Button>
+<Tooltip triggeredBy="#placement-2" placement='top'>
+  Tooltip content - Top
+</Tooltip>
+<Button id="placement-3">Tooltip bottom</Button>
+<Tooltip triggeredBy="#placement-3" placement='bottom'>
+  Tooltip content - Bottom
+</Tooltip>
+<Button id="placement-4" >Tooltip right</Button>
+<Tooltip triggeredBy="#placement-4" placement='right'>
+  Tooltip content - Right
 </Tooltip>
 ```