From 9f28c30f36af2f1359ee0cc1b7e8cab2f48cf9eb Mon Sep 17 00:00:00 2001
From: Shinichi Okada <147320+shinokada@users.noreply.github.com>
Date: Sun, 30 Jun 2024 09:49:14 +0200
Subject: [PATCH] docs: fix: tooltip placement and tooltip types

---
 src/routes/docs/components/tooltip.md | 31 ++++++++++++++++++---------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/routes/docs/components/tooltip.md b/src/routes/docs/components/tooltip.md
index 49fc09942..f39f6aed5 100644
--- 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>
 ```