feat: TET-868 review changes

src/components/Tooltip/Tooltip.stories.tsx

@@ -1,9 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Tooltip } from './Tooltip';
 import { TooltipElement } from './TooltipElement';
+import { Button } from '../Button';
 
 import { TetDocs } from '@/docs-components/TetDocs';
 import { TooltipDocs } from '@/docs-components/TooltipDocs';
+import { tet } from '@/tetrisly';
 
 const meta = {
   title: 'Tooltip',
@@ -39,7 +42,7 @@ const meta = {
       ),
     },
   },
-} satisfies Meta<typeof TooltipElement>;
+} satisfies Meta<typeof Tooltip>;
 
 export default meta;
 
@@ -51,3 +54,22 @@ export const Default: Story = {
     tooltipPosition: 'top',
   },
 };
+
+export const WithButtonTootlip: Story = {
+  render: () => (
+    <tet.div
+      margin={20}
+      display="flex"
+      flexDirection="column"
+      alignItems="start"
+    >
+      <Tooltip
+        text="Button tooltip"
+        arrowheadPosition="end"
+        tooltipPosition="top"
+      >
+        <Button label="Button" />
+      </Tooltip>
+    </tet.div>
+  ),
+};

src/components/Tooltip/Tooltip.styles.ts

@@ -41,6 +41,8 @@ export const defaultConfig = {
       padding: '$space-component-padding-xSmall $space-component-padding-small',
       borderRadius: '$border-radius-medium',
       text: '$typo-body-small',
+      minWidth: '20px',
+      minHeight: '28px',
       w: 'max-content',
       maxWidth: '240px',
     },
@@ -49,9 +51,7 @@ export const defaultConfig = {
       alignContent: 'center',
       justifyContent: 'center',
       w: 'fit-content',
-      transition: 'opacity',
-      transitionDuration: 200,
-      opacity: 1,
+      transition: 'opacity .2s ease-in-out',
       display: 'inline-flex',
       zIndex: 1,
     },

src/components/Tooltip/TooltipElement.tsx

@@ -3,6 +3,7 @@ import { forwardRef, useMemo } from 'react';
 import { Arrow } from './Arrow';
 import { stylesBuilder } from './stylesBuilder';
 import { TooltipProps } from './Tooltip.props';
+import { useOpacity } from './useOpacity';
 import {
   shouldRenderTooltipElementAfterIcon as shouldRenderArrowAfterContent,
   shouldRenderTooltipElementBeforeIcon as shouldRenderArrowBeforeContent,
@@ -31,6 +32,7 @@ export const TooltipElement = forwardRef<HTMLDivElement, TooltipElementProps>(
     const renderArrowAfterContent =
       shouldRenderArrowAfterContent(tooltipPosition);
 
+    const { opacity } = useOpacity();
     const styles = useMemo(
       () => stylesBuilder(tooltipPosition, arrowheadPosition, custom),
       [arrowheadPosition, tooltipPosition, custom],
@@ -44,6 +46,7 @@ export const TooltipElement = forwardRef<HTMLDivElement, TooltipElementProps>(
         {...restProps}
         top={position.top}
         left={position.left}
+        opacity={opacity}
       >
         {renderArrowBeforeContent && (
           <tet.div {...styles.arrow} data-testid="tooltip-arrow">

src/components/Tooltip/useOpacity.ts

@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react';
+
+export const useOpacity = () => {
+  const [opacity, setOpacity] = useState(0);
+
+  useEffect(() => {
+    setOpacity(1);
+  }, []);
+
+  return { opacity };
+};