diff --git a/src/components/tooltip/index.tsx b/src/components/tooltip/index.tsx
new file mode 100644
index 00000000..3781f373
--- /dev/null
+++ b/src/components/tooltip/index.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { Tooltip as BaseTooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip'
+
+type TooltipProps = React.ComponentProps<typeof BaseTooltip> & {
+  title: React.ReactNode
+} & Pick<React.ComponentProps<typeof TooltipContent>, 'side' | 'sideOffset' | 'align'>
+
+const TooltipContentNoArrow = ({
+  children,
+  sideOffset = 8, // Needed when arrow is hidden
+  ...props
+}: React.ComponentProps<typeof TooltipContent>) => {
+  return (
+    <TooltipContent
+      className="[&>span]:hidden max-w-[400px] text-pretty bg-base-popover border text-popover-foreground shadow-[0px_2px_4px_-1px_rgba(0,0,0,0.06)] shadow-md"
+      sideOffset={sideOffset}
+      {...props}
+    >
+      {children}
+    </TooltipContent>
+  )
+}
+
+export const Tooltip = ({ title, children, side, sideOffset, align, ...props }: TooltipProps) => {
+  return (
+    <BaseTooltip {...props}>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContentNoArrow side={side} sideOffset={sideOffset} align={align}>
+        {title}
+      </TooltipContentNoArrow>
+    </BaseTooltip>
+  )
+}
diff --git a/src/stories/Tooltip/Tooltip.stories.tsx b/src/stories/Tooltip/Tooltip.stories.tsx
index f0b0e186..32ab86f0 100644
--- a/src/stories/Tooltip/Tooltip.stories.tsx
+++ b/src/stories/Tooltip/Tooltip.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/ui/tooltip.tsx'
+import { Tooltip } from '../../components/tooltip'
 import { Button } from '../../components/ui/button.tsx'
 import { expect, within } from 'storybook/test'
 
@@ -21,8 +21,14 @@ const meta: Meta<typeof Tooltip> = {
   },
   tags: ['autodocs'],
   argTypes: {
-    defaultOpen: {
-      control: 'boolean',
+    title: {
+      control: 'text',
+      description: 'The content of the tooltip',
+    },
+    side: {
+      control: { type: 'radio' },
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'The preferred side of the trigger to render against',
     },
     open: {
       control: 'boolean',
@@ -38,16 +44,8 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    children: (
-      <>
-        <TooltipTrigger>
-          <Button variant="outline">Hover me</Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Tooltip content</p>
-        </TooltipContent>
-      </>
-    ),
+    title: 'Tooltip content',
+    children: <Button variant="outline">Hover me</Button>,
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -55,53 +53,3 @@ export const Default: Story = {
     await expect(button).toBeInTheDocument()
   },
 }
-
-export const Variants: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col items-center gap-4">
-        <div className="flex justify-center gap-4">
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline">Top</Button>
-            </TooltipTrigger>
-            <TooltipContent side="top">
-              <p>Tooltip on top</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
-        <div className="flex justify-between gap-16">
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline">Left</Button>
-            </TooltipTrigger>
-            <TooltipContent side="left">
-              <p>Tooltip on left</p>
-            </TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline">Right</Button>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              <p>Tooltip on right</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
-        <div className="flex justify-center gap-4">
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline">Bottom</Button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">
-              <p>Tooltip on bottom</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
-    ),
-  },
-}