Docs(web-twig): Put pure CSS examples of Tooltip in line so they ar…

…e usable in more viewport sizes
lmc-eu · Nov 6, 2023 · ed7cff4 · ed7cff4
1 parent 2d37274
commit ed7cff4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 25 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
@@ -10,7 +10,7 @@
         {% include '@components/Tooltip/stories/TooltipStatic.twig' %}
     </DocsSection>
 
-    <DocsSection title="Tooltip on Hover (Pure CSS)">
+    <DocsSection title="Tooltip on Hover (Pure CSS)" stackAlignment="stretch">
         {% include '@components/Tooltip/stories/TooltipOnHover.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
@@ -1,48 +1,32 @@
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-top"
-        UNSAFE_className="TooltipTarget"
-    >
+<TooltipWrapper unsafe_classname="d-inline-block mr-600 mb-600">
+    <ButtonLink href="#" aria-describedby="my-tooltip-hover-top" unsafe_classname="TooltipTarget">
         Tooltip on top
     </ButtonLink>
     <Tooltip id="my-tooltip-hover-top" placement="top">
         Hello there!
     </Tooltip>
 </TooltipWrapper>
 
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-right"
-        UNSAFE_className="TooltipTarget"
-    >
+<TooltipWrapper unsafe_classname="d-inline-block mr-600 mb-600">
+    <ButtonLink href="#" aria-describedby="my-tooltip-hover-right" unsafe_classname="TooltipTarget">
         Tooltip on right
     </ButtonLink>
     <Tooltip id="my-tooltip-hover-right" placement="right">
         Hello there!
     </Tooltip>
 </TooltipWrapper>
 
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-bottom"
-        UNSAFE_className="TooltipTarget"
-    >
+<TooltipWrapper unsafe_classname="d-inline-block mr-600 mb-600">
+    <ButtonLink href="#" aria-describedby="my-tooltip-hover-bottom" unsafe_classname="TooltipTarget">
         Tooltip on bottom
     </ButtonLink>
     <Tooltip id="my-tooltip-hover-bottom" placement="bottom">
         Hello there!
     </Tooltip>
 </TooltipWrapper>
 
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-left"
-        UNSAFE_className="TooltipTarget"
-    >
+<TooltipWrapper unsafe_classname="d-inline-block mr-600 mb-600">
+    <ButtonLink href="#" aria-describedby="my-tooltip-hover-left" unsafe_classname="TooltipTarget">
         Tooltip on left
     </ButtonLink>
     <Tooltip id="my-tooltip-hover-left" placement="left">