Merge pull request #1031 from tailwarden/fix-tooltip

fix: fix tooltip component positioning and add it to storybook

dashboard/components/explorer/DependencyGraph.tsx

@@ -151,7 +151,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
         {data?.nodes?.length} Resources
         <div className="relative">
           <WarningIcon className="peer" height="16" width="16" />
-          <Tooltip top="sm" align="right" width="lg">
+          <Tooltip bottom="xs" align="left" width="lg">
             Only AWS resources are currently supported on the explorer.
           </Tooltip>
         </div>

dashboard/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import WarningIcon from '@components/icons/WarningIcon';
+import Tooltip from './Tooltip';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Tooltip> = {
+  title: 'Komiser/Tooltip',
+  component: Tooltip,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          // eslint-disable-next-line no-multi-str
+          'The tooltip component required to be wrapped inside an relative positioned container. There also need to be a trigger element which is required to have `className="peer"`!\
+          In this example the strigger element is the Info icon.\
+          The Storybook preview gives you an idea about possible parameters but might not work 100% because you should either define top **or** bottom, **not** both.\
+          To allow to show all possible options, we define both top, bottom and left, right in this example. Please keep this in mind!'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div className="flex h-96 items-center justify-center">
+        <div className="relative h-[16px] w-[16px]">
+          <WarningIcon className="peer" height="16" width="16" />
+          <Story />
+        </div>
+      </div>
+    )
+  ],
+  argTypes: {
+    top: {
+      control: {
+        type: 'inline-radio'
+      }
+    },
+    bottom: {
+      control: {
+        type: 'inline-radio'
+      }
+    },
+    align: {
+      control: {
+        type: 'inline-radio'
+      }
+    },
+    width: {
+      control: {
+        type: 'inline-radio'
+      }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const TopTiny: Story = {
+  args: {
+    top: 'xs',
+    align: 'left',
+    width: 'lg',
+    children: "That's a tooltip"
+  }
+};

dashboard/components/tooltip/Tooltip.tsx

@@ -3,7 +3,8 @@ import { ReactNode } from 'react';
 
 type TooltipProps = {
   children: ReactNode;
-  top?: 'sm' | 'md' | 'lg';
+  top?: 'xs' | 'sm' | 'md' | 'lg';
+  bottom?: 'xs' | 'sm' | 'md' | 'lg';
   align?: 'left' | 'center' | 'right';
   width?: 'sm' | 'md' | 'lg';
 };
@@ -12,15 +13,24 @@ function Tooltip({
   children,
   top = 'md',
   align = 'left',
-  width = 'md'
+  width = 'md',
+  bottom
 }: TooltipProps) {
   return (
     <div
       role="tooltip"
       className={classNames(
-        'absolute left-6 top-24 z-[1000] hidden animate-fade-in-up items-center rounded-lg bg-black-900 px-4 py-2 text-xs font-medium text-black-200 opacity-0 peer-hover:flex',
-        { 'top-[3rem]': top === 'sm' },
-        { 'left-auto right-0': align === 'right' },
+        'absolute z-[1000] hidden animate-fade-in-up items-center rounded-lg bg-black-900 px-4 py-2 text-xs font-medium text-black-200 opacity-0 peer-hover:flex',
+        { 'top-0': top === 'xs' && !bottom },
+        { 'top-[3rem]': top === 'sm' && !bottom },
+        { 'top-24': top === 'md' && !bottom },
+        { 'top-36': top === 'lg' && !bottom },
+        { 'bottom-0': bottom === 'xs' },
+        { 'bottom-[3rem]': bottom === 'sm' },
+        { 'bottom-24': bottom === 'md' },
+        { 'bottom-36': bottom === 'lg' },
+        { 'left-6': align === 'left' },
+        { 'right-6': align === 'right' },
         { 'w-72': width === 'lg' }
       )}
     >