From 2e1c672dd6c072093eae97e6665b34f48ecf2dbb Mon Sep 17 00:00:00 2001
From: Sylvain Gagnot <sylvain.gagnot@iloh.fr>
Date: Thu, 12 Mar 2026 18:22:06 +0100
Subject: [PATCH] Fix invisible on top element

---
 .../templates/components/Tooltip/Content.html.twig        | 2 +-
 ...shadcn, component tooltip, code file Demo.html__1.html | 2 +-
 ...ponent tooltip, code file Disabled Button.html__1.html | 2 +-
 ...shadcn, component tooltip, code file Side.html__1.html | 8 ++++----
 ...hadcn, component tooltip, code file Usage.html__1.html | 2 +-
 ...tooltip, code file With Keyboard Shortcut.html__1.html | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Content.html.twig b/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Content.html.twig
index f5bfaf09bb9..112011e2f5e 100644
--- a/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Content.html.twig
+++ b/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Content.html.twig
@@ -14,7 +14,7 @@
     style="position: absolute; left: 0px; top: 0px; will-change: transform;"
 >
     <div
-        class="{{ ('invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs ' ~ attributes.render('class'))|tailwind_merge }}"
+        class="{{ ('invisible hidden open:visible open:flex transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs ' ~ attributes.render('class'))|tailwind_merge }}"
         {{ attributes.defaults({
             id: _tooltip_content_id,
             role: 'tooltip',
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html__1.html
index 3251fffaff7..3b8e4b4fd5f 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html__1.html	
@@ -16,7 +16,7 @@
 <div class="relative inline-block" id="tooltip-demo" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-demo_wrapper" data-tooltip-content-selector-value="#tooltip-demo_content" data-tooltip-arrow-selector-value="#tooltip-demo_arrow">
 <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" id="tooltip-demo_trigger" aria-describedby="tooltip-demo_content" data-tooltip-target="trigger" data-action="mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide">Hover</button>
         <div id="tooltip-demo_wrapper" data-slot="tooltip-wrapper" data-side="top" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
-    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-demo_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
+    <div class="invisible hidden open:visible open:flex transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-demo_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
 <p>Add to library</p>
     <div id="tooltip-demo_arrow" data-side="top" data-tooltip-target="arrow" aria-hidden="true" class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" style="position: absolute;"></div>
     </div>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html__1.html
index d1b60bbd586..bc752216979 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html__1.html	
@@ -16,7 +16,7 @@
 <div class="relative inline-block" id="tooltip-disabled-button" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-disabled-button_wrapper" data-tooltip-content-selector-value="#tooltip-disabled-button_content" data-tooltip-arrow-selector-value="#tooltip-disabled-button_arrow">
 <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" id="tooltip-disabled-button_trigger" aria-describedby="tooltip-disabled-button_content" data-tooltip-target="trigger" data-action="mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide" disabled>Disabled</button>
         <div id="tooltip-disabled-button_wrapper" data-slot="tooltip-wrapper" data-side="top" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
-    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-disabled-button_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
+    <div class="invisible hidden open:visible open:flex transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-disabled-button_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
 <p>This feature is currently unavailable</p>
     <div id="tooltip-disabled-button_arrow" data-side="top" data-tooltip-target="arrow" aria-hidden="true" class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" style="position: absolute;"></div>
     </div>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html__1.html
index 22660ae9247..590d11e3e61 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html__1.html	
@@ -24,7 +24,7 @@
 <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 w-fit" id="tooltip-side-left_trigger" aria-describedby="tooltip-side-left_content" data-tooltip-target="trigger" data-action="mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide">Left
                 </button>
                         <div id="tooltip-side-left_wrapper" data-slot="tooltip-wrapper" data-side="left" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
-    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-side-left_content" role="tooltip" data-slot="tooltip-content" data-side="left" data-tooltip-target="content">
+    <div class="invisible hidden open:visible open:flex transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-side-left_content" role="tooltip" data-slot="tooltip-content" data-side="left" data-tooltip-target="content">
 <p>Add to library</p>
             <div id="tooltip-side-left_arrow" data-side="left" data-tooltip-target="arrow" aria-hidden="true" class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" style="position: absolute;"></div>
     </div>
@@ -34,7 +34,7 @@
 <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 w-fit" id="tooltip-side-top_trigger" aria-describedby="tooltip-side-top_content" data-tooltip-target="trigger" data-action="mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide">Top
                 </button>
                         <div id="tooltip-side-top_wrapper" data-slot="tooltip-wrapper" data-side="top" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
-    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-side-top_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
+    <div class="invisible hidden open:visible open:flex transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-side-top_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
 <p>Add to library</p>
             <div id="tooltip-side-top_arrow" data-side="top" data-tooltip-target="arrow" aria-hidden="true" class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" style="position: absolute;"></div>
     </div>
@@ -44,7 +44,7 @@
 <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 w-fit" id="tooltip-side-bottom_trigger" aria-describedby="tooltip-side-bottom_content" data-tooltip-target="trigger" data-action="mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide">Bottom
                 </button>
                         <div id="tooltip-side-bottom_wrapper" data-slot="tooltip-wrapper" data-side="bottom" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
-    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-side-bottom_content" role="tooltip" data-slot="tooltip-content" data-side="bottom" data-tooltip-target="content">
+    <div class="invisible hidden open:visible open:flex transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-side-bottom_content" role="tooltip" data-slot="tooltip-content" data-side="bottom" data-tooltip-target="content">
 <p>Add to library</p>
             <div id="tooltip-side-bottom_arrow" data-side="bottom" data-tooltip-target="arrow" aria-hidden="true" class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" style="position: absolute;"></div>
     </div>
@@ -54,7 +54,7 @@
 <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 w-fit" id="tooltip-side-right_trigger" aria-describedby="tooltip-side-right_content" data-tooltip-target="trigger" data-action="mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide">Right
                 </button>
                         <div id="tooltip-side-right_wrapper" data-slot="tooltip-wrapper" data-side="right" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
-    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-side-right_content" role="tooltip" data-slot="tooltip-content" data-side="right" data-tooltip-target="content">
+    <div class="invisible hidden open:visible open:flex transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-side-right_content" role="tooltip" data-slot="tooltip-content" data-side="right" data-tooltip-target="content">
 <p>Add to library</p>
             <div id="tooltip-side-right_arrow" data-side="right" data-tooltip-target="arrow" aria-hidden="true" class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" style="position: absolute;"></div>
     </div>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Usage.html__1.html
index 0452a925a2d..9d21d60a368 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Usage.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Usage.html__1.html	
@@ -16,7 +16,7 @@
 <div class="relative inline-block" id="my-tooltip" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#my-tooltip_wrapper" data-tooltip-content-selector-value="#my-tooltip_content" data-tooltip-arrow-selector-value="#my-tooltip_arrow">
 <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none bg-primary text-primary-foreground [a]:hover:bg-primary/80 h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" id="my-tooltip_trigger" aria-describedby="my-tooltip_content" data-tooltip-target="trigger" data-action="mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide">Hover</button>
         <div id="my-tooltip_wrapper" data-slot="tooltip-wrapper" data-side="top" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
-    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="my-tooltip_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
+    <div class="invisible hidden open:visible open:flex transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="my-tooltip_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
 <p>Add to library</p>
     <div id="my-tooltip_arrow" data-side="top" data-tooltip-target="arrow" aria-hidden="true" class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" style="position: absolute;"></div>
     </div>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html__1.html
index 8e48bc2d535..9c0d2c90f9f 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html__1.html	
@@ -21,7 +21,7 @@
 <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg" id="tooltip-with-keyboard-shortcut_trigger" aria-describedby="tooltip-with-keyboard-shortcut_content" data-tooltip-target="trigger" data-action="mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7M7 3v4a1 1 0 0 0 1 1h7"></path></g></svg>
         </button>
         <div id="tooltip-with-keyboard-shortcut_wrapper" data-slot="tooltip-wrapper" data-side="top" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
-    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs pr-1.5" id="tooltip-with-keyboard-shortcut_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
+    <div class="invisible hidden open:visible open:flex transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs pr-1.5" id="tooltip-with-keyboard-shortcut_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
 <div class="flex items-center gap-2">
             Save Changes <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">S</kbd>
         </div>