Skip to content

[Toolkit] Fix Shadcn invisible tooltip wrapper on top element #3374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CODEheures wants to merge 1 commit into
base: 2.x
Choose a base branch
from
Open

[Toolkit] Fix Shadcn invisible tooltip wrapper on top element #3374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Content.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion ...mponentRendering with data set Kit shadcn, component tooltip, code file Demo.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...ering with data set Kit shadcn, component tooltip, code file Disabled Button.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions ...mponentRendering with data set Kit shadcn, component tooltip, code file Side.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...ponentRendering with data set Kit shadcn, component tooltip, code file Usage.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading
Loading