feat: Add @packages/ui/Tooltip

frontend/apps/service-site/src/styles/variables.css

@@ -11,4 +11,8 @@
     calc(2 * var(--default-page-margin))
   );
   --default-header-height: 64px;
+  --z-index-popup-button: 10;
+  --z-index-toast: 100;
+  --z-index-hover-card: 2;
+  --z-index-tooltip: 200;
 }

frontend/packages/ui/src/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,25 @@
+.content {
+  z-index: var(--z-index-tooltip);
+  padding: var(--spacing-1half) var(--spacing-1);
+  font-size: var(--font-size-1);
+  color: var(--tooltip-foreground);
+  background-color: var(--tooltip-background);
+  border: 1px solid var(--tooltip-border);
+  border-radius: var(--border-radius-sm);
+  animation-duration: 150ms;
+  animation-timing-function: var(--default-timing-function);
+}
+
+.content[data-state='delayed-open'] {
+  animation-name: fadeIn;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

frontend/packages/ui/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from './Tooltip'
+
+const StoryComponent = () => {
+  return (
+    <TooltipProvider>
+      <TooltipRoot>
+        <TooltipTrigger asChild>
+          <span>Hover me</span>
+        </TooltipTrigger>
+        <TooltipPortal>
+          <TooltipContent sideOffset={5}>Add to library</TooltipContent>
+        </TooltipPortal>
+      </TooltipRoot>
+    </TooltipProvider>
+  )
+}
+
+const meta = {
+  component: StoryComponent,
+} satisfies Meta<typeof StoryComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

frontend/packages/ui/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable no-restricted-imports */
+import {
+  Content,
+  Portal,
+  Provider,
+  Root,
+  Trigger,
+} from '@radix-ui/react-tooltip'
+import {
+  type ComponentProps,
+  type FC,
+  type PropsWithChildren,
+  forwardRef,
+} from 'react'
+import styles from './Tooltip.module.css'
+
+export const TooltipContent = forwardRef<
+  HTMLDivElement,
+  ComponentProps<typeof Content>
+>((props, ref) => {
+  return <Content {...props} ref={ref} className={styles.content} />
+})
+
+TooltipContent.displayName = 'TooltipContent'
+
+export const TooltipProvider: FC<PropsWithChildren> = ({ children }) => {
+  return <Provider delayDuration={100}>{children}</Provider>
+}
+export const TooltipPortal = Portal
+export const TooltipRoot = Root
+export const TooltipTrigger = Trigger

frontend/packages/ui/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from './Tooltip'

frontend/packages/ui/src/components/index.ts

@@ -1 +1,2 @@
 export * from './DropdownMenu'
+export * from './Tooltip'