[Toolkit][Shadcn] Align tooltip with shadcn reference#3568
Merged
Conversation
Contributor
seb-jean
commented
May 20, 2026
seb-jean
commented
| Q | A |
|---|---|
| Bug fix? | no |
| New feature? | no |
| Deprecations? | no |
| Documentation? | yes |
| Issues | Part of #3233 |
| License | MIT |
carsonbot
added
Documentation
seb-jean
force-pushed
the
feat/toolkit-shadcn-tooltip
branch
from
a8feba1 to
2243c0c
Compare
Kocal
reviewed
May 21, 2026
| "symfony/ux-twig-component:^3.1" | ||
| ] | ||
| ], | ||
| "recipe": ["kbd"] |
Member
There was a problem hiding this comment.
The recipe dependencies does not cover examples, kdb is not used in templates/components/
Kocal
force-pushed
the
feat/toolkit-shadcn-tooltip
branch
from
2243c0c to
2e8b715
Compare
# Conflicts:
# src/Toolkit/CHANGELOG.md
diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md
index 4fd74868862..d83d2c6a61d 100644
--- a/src/Toolkit/CHANGELOG.md
+++ b/src/Toolkit/CHANGELOG.md
@@ -14,8 +14,9 @@
- [Shadcn] Rework `toggle-group` recipe to use `provide()`/`inject()`
- [Shadcn] Rework `tooltip` recipe to use `provide()`/`inject()`
- [Shadcn] Align `card` with shadcn reference
-- [Shadcn] Align `toggle` with shadcn reference
- [Shadcn] Align `textarea` with shadcn reference
+- [Shadcn] Align `toggle` with shadcn reference
+- [Shadcn] Align `tooltip` with shadcn reference
## 3.0.0
diff --git a/src/Toolkit/kits/shadcn/tooltip/examples/Disabled Button.html.twig b/src/Toolkit/kits/shadcn/tooltip/examples/Disabled Button.html.twig
index d65f91291aa..6d3e6db206c 100644
--- a/src/Toolkit/kits/shadcn/tooltip/examples/Disabled Button.html.twig
+++ b/src/Toolkit/kits/shadcn/tooltip/examples/Disabled Button.html.twig
@@ -1,6 +1,8 @@
<twig:Tooltip id="tooltip-disabled-button">
<twig:Tooltip:Trigger>
- <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" disabled>Disabled</twig:Button>
+ <span class="inline-block w-fit">
+ <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" disabled class="pointer-events-auto">Disabled</twig:Button>
+ </span>
</twig:Tooltip:Trigger>
<twig:Tooltip:Content>
<p>This feature is currently unavailable</p>
diff --git a/src/Toolkit/kits/shadcn/tooltip/examples/RTL.html.twig b/src/Toolkit/kits/shadcn/tooltip/examples/RTL.html.twig
new file mode 100644
index 00000000000..fb786e0be0d
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/tooltip/examples/RTL.html.twig
@@ -0,0 +1,29 @@
+<div class="flex flex-col gap-8">
+ {# Arabic #}
+ <div class="flex flex-wrap gap-2" dir="rtl">
+ {% for side, label in {left: 'يسار', top: 'أعلى', bottom: 'أسفل', right: 'يمين'} %}
+ <twig:Tooltip id="tooltip-rtl-ar-{{ side }}">
+ <twig:Tooltip:Trigger>
+ <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
+ {{ label }}
+ </twig:Button>
+ </twig:Tooltip:Trigger>
+ <twig:Tooltip:Content side="{{ side }}">إضافة إلى المكتبة</twig:Tooltip:Content>
+ </twig:Tooltip>
+ {% endfor %}
+ </div>
+
+ {# Hebrew #}
+ <div class="flex flex-wrap gap-2" dir="rtl">
+ {% for side, label in {left: 'שמאל', top: 'למעלה', bottom: 'למטה', right: 'ימין'} %}
+ <twig:Tooltip id="tooltip-rtl-he-{{ side }}">
+ <twig:Tooltip:Trigger>
+ <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
+ {{ label }}
+ </twig:Button>
+ </twig:Tooltip:Trigger>
+ <twig:Tooltip:Content side="{{ side }}">הוסף לרשימה</twig:Tooltip:Content>
+ </twig:Tooltip>
+ {% endfor %}
+ </div>
+</div>
diff --git a/src/Toolkit/kits/shadcn/tooltip/examples/With Keyboard Shortcut.html.twig b/src/Toolkit/kits/shadcn/tooltip/examples/With Keyboard Shortcut.html.twig
index da3dc301fcc..c882352c692 100644
--- a/src/Toolkit/kits/shadcn/tooltip/examples/With Keyboard Shortcut.html.twig
+++ b/src/Toolkit/kits/shadcn/tooltip/examples/With Keyboard Shortcut.html.twig
@@ -4,9 +4,7 @@
<twig:ux:icon name="lucide:save" />
</twig:Button>
</twig:Tooltip:Trigger>
- <twig:Tooltip:Content class="pr-1.5">
- <div class="flex items-center gap-2">
- Save Changes <twig:Kbd>S</twig:Kbd>
- </div>
+ <twig:Tooltip:Content>
+ Save Changes <twig:Kbd>S</twig:Kbd>
</twig:Tooltip:Content>
</twig:Tooltip>
diff --git a/src/Toolkit/kits/shadcn/tooltip/manifest.json b/src/Toolkit/kits/shadcn/tooltip/manifest.json
index d4d2eeacc9b..fa918868cde 100644
--- a/src/Toolkit/kits/shadcn/tooltip/manifest.json
+++ b/src/Toolkit/kits/shadcn/tooltip/manifest.json
@@ -14,6 +14,7 @@
"twig/html-extra:^3.24.0",
"tales-from-a-dev/twig-tailwind-extra:^1.0.0",
"symfony/ux-twig-component:^3.1"
- ]
+ ],
+ "recipe": ["kbd"]
}
}
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 07dae28be0f..8fa8153653c 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
@@ -17,7 +17,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="{{ ('z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100 ' ~ attributes.render('class'))|tailwind_merge }}"
{{ attributes.defaults({
id: _tooltip_contentId,
role: 'tooltip',
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file With Tooltip.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file With Tooltip.html.twig__1.html
index df008e9063c..d035bc47bd4 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file With Tooltip.html.twig__1.html
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file With Tooltip.html.twig__1.html
@@ -37,7 +37,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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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" data-action="click->alert-dialog#open mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide" data-alert-dialog-target="trigger" aria-haspopup="dialog" aria-expanded="false" id="tooltip-alert-dialog_trigger" aria-describedby="tooltip-alert-dialog_content" data-tooltip-target="trigger">Delete Account
</button>
<div id="tooltip-alert-dialog_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-alert-dialog_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
+ <div class="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-alert-dialog_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
<p>This will permanently delete your account</p>
<div id="tooltip-alert-dialog_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 dialog, code file With Tooltip.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file With Tooltip.html.twig__1.html
index fcf9d1263bc..0d6dc946cc7 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file With Tooltip.html.twig__1.html
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file With Tooltip.html.twig__1.html
@@ -48,7 +48,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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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" data-action="click->dialog#open mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide" data-dialog-target="trigger" aria-haspopup="dialog" id="tooltip-alert-dialog_trigger" aria-describedby="tooltip-alert-dialog_content" data-tooltip-target="trigger">Edit Profile
</button>
<div id="tooltip-alert-dialog_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-alert-dialog_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
+ <div class="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-alert-dialog_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
<p>A super useful tooltip</p>
<div id="tooltip-alert-dialog_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 Demo.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html.twig__1.html
index 91cee964c6a..dd70f143ffb 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html.twig__1.html
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html.twig__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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" 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.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html.twig__1.html
index 8f872f284f7..2ba8bf1b792 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html.twig__1.html
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html.twig__1.html
@@ -5,7 +5,9 @@
```twig
<twig:Tooltip id="tooltip-disabled-button">
<twig:Tooltip:Trigger>
- <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" disabled>Disabled</twig:Button>
+ <span class="inline-block w-fit">
+ <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" disabled class="pointer-events-auto">Disabled</twig:Button>
+ </span>
</twig:Tooltip:Trigger>
<twig:Tooltip:Content>
<p>This feature is currently unavailable</p>
@@ -14,9 +16,11 @@
```
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
<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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide" disabled>Disabled</button>
+<span class="inline-block w-fit">
+ <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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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 pointer-events-auto" id="tooltip-disabled-button_trigger" aria-describedby="tooltip-disabled-button_content" data-tooltip-target="trigger" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide" disabled>Disabled</button>
+ </span>
<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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" 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 RTL.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file RTL.html.twig__1.html
new file mode 100644
index 00000000000..6c139d33d50
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file RTL.html.twig__1.html
@@ -0,0 +1,107 @@
+<!--
+- Kit: Shadcn UI
+- Component: Tooltip
+- Code:
+```twig
+<div class="flex flex-col gap-8">
+ {# Arabic #}
+ <div class="flex flex-wrap gap-2" dir="rtl">
+ {% for side, label in {left: 'يسار', top: 'أعلى', bottom: 'أسفل', right: 'يمين'} %}
+ <twig:Tooltip id="tooltip-rtl-ar-{{ side }}">
+ <twig:Tooltip:Trigger>
+ <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
+ {{ label }}
+ </twig:Button>
+ </twig:Tooltip:Trigger>
+ <twig:Tooltip:Content side="{{ side }}">إضافة إلى المكتبة</twig:Tooltip:Content>
+ </twig:Tooltip>
+ {% endfor %}
+ </div>
+
+ {# Hebrew #}
+ <div class="flex flex-wrap gap-2" dir="rtl">
+ {% for side, label in {left: 'שמאל', top: 'למעלה', bottom: 'למטה', right: 'ימין'} %}
+ <twig:Tooltip id="tooltip-rtl-he-{{ side }}">
+ <twig:Tooltip:Trigger>
+ <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
+ {{ label }}
+ </twig:Button>
+ </twig:Tooltip:Trigger>
+ <twig:Tooltip:Content side="{{ side }}">הוסף לרשימה</twig:Tooltip:Content>
+ </twig:Tooltip>
+ {% endfor %}
+ </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col gap-8">
+ <div class="flex flex-wrap gap-2" dir="rtl">
+ <div class="relative inline-block" id="tooltip-rtl-ar-left" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-rtl-ar-left_wrapper" data-tooltip-content-selector-value="#tooltip-rtl-ar-left_content" data-tooltip-arrow-selector-value="#tooltip-rtl-ar-left_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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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-rtl-ar-left_trigger" aria-describedby="tooltip-rtl-ar-left_content" data-tooltip-target="trigger" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide">يسار
+ </button>
+ <div id="tooltip-rtl-ar-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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-rtl-ar-left_content" role="tooltip" data-slot="tooltip-content" data-side="left" data-tooltip-target="content">إضافة إلى المكتبة<div id="tooltip-rtl-ar-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>
+</div>
+ </div>
+ <div class="relative inline-block" id="tooltip-rtl-ar-top" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-rtl-ar-top_wrapper" data-tooltip-content-selector-value="#tooltip-rtl-ar-top_content" data-tooltip-arrow-selector-value="#tooltip-rtl-ar-top_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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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-rtl-ar-top_trigger" aria-describedby="tooltip-rtl-ar-top_content" data-tooltip-target="trigger" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide">أعلى
+ </button>
+ <div id="tooltip-rtl-ar-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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-rtl-ar-top_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">إضافة إلى المكتبة<div id="tooltip-rtl-ar-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>
+</div>
+ </div>
+ <div class="relative inline-block" id="tooltip-rtl-ar-bottom" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-rtl-ar-bottom_wrapper" data-tooltip-content-selector-value="#tooltip-rtl-ar-bottom_content" data-tooltip-arrow-selector-value="#tooltip-rtl-ar-bottom_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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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-rtl-ar-bottom_trigger" aria-describedby="tooltip-rtl-ar-bottom_content" data-tooltip-target="trigger" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide">أسفل
+ </button>
+ <div id="tooltip-rtl-ar-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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-rtl-ar-bottom_content" role="tooltip" data-slot="tooltip-content" data-side="bottom" data-tooltip-target="content">إضافة إلى المكتبة<div id="tooltip-rtl-ar-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>
+</div>
+ </div>
+ <div class="relative inline-block" id="tooltip-rtl-ar-right" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-rtl-ar-right_wrapper" data-tooltip-content-selector-value="#tooltip-rtl-ar-right_content" data-tooltip-arrow-selector-value="#tooltip-rtl-ar-right_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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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-rtl-ar-right_trigger" aria-describedby="tooltip-rtl-ar-right_content" data-tooltip-target="trigger" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide">يمين
+ </button>
+ <div id="tooltip-rtl-ar-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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-rtl-ar-right_content" role="tooltip" data-slot="tooltip-content" data-side="right" data-tooltip-target="content">إضافة إلى المكتبة<div id="tooltip-rtl-ar-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>
+</div>
+ </div>
+ </div>
+
+ <div class="flex flex-wrap gap-2" dir="rtl">
+ <div class="relative inline-block" id="tooltip-rtl-he-left" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-rtl-he-left_wrapper" data-tooltip-content-selector-value="#tooltip-rtl-he-left_content" data-tooltip-arrow-selector-value="#tooltip-rtl-he-left_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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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-rtl-he-left_trigger" aria-describedby="tooltip-rtl-he-left_content" data-tooltip-target="trigger" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide">שמאל
+ </button>
+ <div id="tooltip-rtl-he-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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-rtl-he-left_content" role="tooltip" data-slot="tooltip-content" data-side="left" data-tooltip-target="content">הוסף לרשימה<div id="tooltip-rtl-he-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>
+</div>
+ </div>
+ <div class="relative inline-block" id="tooltip-rtl-he-top" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-rtl-he-top_wrapper" data-tooltip-content-selector-value="#tooltip-rtl-he-top_content" data-tooltip-arrow-selector-value="#tooltip-rtl-he-top_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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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-rtl-he-top_trigger" aria-describedby="tooltip-rtl-he-top_content" data-tooltip-target="trigger" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide">למעלה
+ </button>
+ <div id="tooltip-rtl-he-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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-rtl-he-top_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">הוסף לרשימה<div id="tooltip-rtl-he-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>
+</div>
+ </div>
+ <div class="relative inline-block" id="tooltip-rtl-he-bottom" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-rtl-he-bottom_wrapper" data-tooltip-content-selector-value="#tooltip-rtl-he-bottom_content" data-tooltip-arrow-selector-value="#tooltip-rtl-he-bottom_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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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-rtl-he-bottom_trigger" aria-describedby="tooltip-rtl-he-bottom_content" data-tooltip-target="trigger" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide">למטה
+ </button>
+ <div id="tooltip-rtl-he-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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-rtl-he-bottom_content" role="tooltip" data-slot="tooltip-content" data-side="bottom" data-tooltip-target="content">הוסף לרשימה<div id="tooltip-rtl-he-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>
+</div>
+ </div>
+ <div class="relative inline-block" id="tooltip-rtl-he-right" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-rtl-he-right_wrapper" data-tooltip-content-selector-value="#tooltip-rtl-he-right_content" data-tooltip-arrow-selector-value="#tooltip-rtl-he-right_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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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-rtl-he-right_trigger" aria-describedby="tooltip-rtl-he-right_content" data-tooltip-target="trigger" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide">ימין
+ </button>
+ <div id="tooltip-rtl-he-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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-rtl-he-right_content" role="tooltip" data-slot="tooltip-content" data-side="right" data-tooltip-target="content">הוסף לרשימה<div id="tooltip-rtl-he-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>
+</div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html.twig__1.html
index 7deebcfcb75..f36c30db374 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html.twig__1.html
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html.twig__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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" 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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" 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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" 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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->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="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" 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 With Keyboard Shortcut.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html.twig__1.html
index b631cf534d5..77c9fe4df1b 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html.twig__1.html
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html.twig__1.html
@@ -9,10 +9,8 @@
<twig:ux:icon name="lucide:save" />
</twig:Button>
</twig:Tooltip:Trigger>
- <twig:Tooltip:Content class="pr-1.5">
- <div class="flex items-center gap-2">
- Save Changes <twig:Kbd>S</twig:Kbd>
- </div>
+ <twig:Tooltip:Content>
+ Save Changes <twig:Kbd>S</twig:Kbd>
</twig:Tooltip:Content>
</twig:Tooltip>
```
@@ -21,10 +19,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] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_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->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->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="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]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10">S</kbd>
- </div>
+ <div class="z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ltr:has-data-[slot=kbd]:pr-1.5 rtl:has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm invisible opacity-0 scale-95 transition-all duration-200 open:visible open:opacity-100 open:scale-100" id="tooltip-with-keyboard-shortcut_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">Save Changes <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min…
Kocal
force-pushed
the
feat/toolkit-shadcn-tooltip
branch
from
2e8b715 to
01fc0f7
Compare
Member
|
Thank you @seb-jean. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.