Merge pull request #1272 from textkernel/feat/update-tooltip-molecule

feat(Tooltip): updated the tooltip to the new design
textkernel · Nov 4, 2024 · acd949a · acd949a
2 parents fa65305 + 07410ed
commit acd949a
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 8 deletions.
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved */
 import * as React from 'react';
 import Tippy, { TippyProps } from '@tippyjs/react';
-import 'tippy.js/dist/tippy.css?external';
 import 'tippy.js/animations/shift-toward.css?external';
+import 'tippy.js/dist/tippy.css?external';
 
 export type TooltipProps = TippyProps;
 
@@ -20,7 +20,7 @@ export const Tooltip: React.FC<TooltipProps> = ({ content, children, disabled, .
         isDisabled = true;
     }
     return (
-        <Tippy content={content} disabled={isDisabled} {...rest}>
+        <Tippy content={content} disabled={isDisabled} maxWidth={320} arrow={false} {...rest}>
             {children}
         </Tippy>
     );

diff --git a/src/components/Tooltip/__tests__/__snapshots__/Tooltip.spec.tsx.snap b/src/components/Tooltip/__tests__/__snapshots__/Tooltip.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`<Tooltip> that renders a Tooltip should render default Tooltip correctl
       data-reference-hidden=""
       data-state="visible"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 300ms;"
+      style="max-width: 320px; transition-duration: 300ms;"
       tabindex="-1"
     >
       <div
@@ -34,10 +34,6 @@ exports[`<Tooltip> that renders a Tooltip should render default Tooltip correctl
           content
         </div>
       </div>
-      <div
-        class="tippy-arrow"
-        style="position: absolute; left: 0px; transform: translate(3px, 0px);"
-      />
     </div>
   </div>
 </body>

diff --git a/stories/molecules/Tooltip.stories.tsx b/stories/molecules/Tooltip.stories.tsx
@@ -16,7 +16,6 @@ export const _Tooltip: Story = {
     args: {
         placement: 'bottom',
         content: 'this is my tooltip text',
-        arrow: true,
         children: <div>hover here to see the tooltip</div>,
     },
     render: (args) => (