Adjust styling to match design guide better

Author: buberdds

src/components/ui/tooltip.tsx

@@ -40,7 +40,6 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
@@ -54,11 +53,25 @@ type TooltipWrapperProps = React.ComponentProps<typeof TooltipPrimitive.Root> &
   align?: 'start' | 'center' | 'end'
 }
 
-function TooltipWrapper({ title, children, side, sideOffset, hidden, align, ...props }: TooltipWrapperProps) {
+function TooltipWrapper({
+  title,
+  children,
+  side,
+  sideOffset = 8,
+  hidden,
+  align,
+  ...props
+}: TooltipWrapperProps) {
   return (
     <Tooltip {...props}>
       <TooltipTrigger>{children}</TooltipTrigger>
-      <TooltipContent side={side} sideOffset={sideOffset} hidden={hidden} align={align}>
+      <TooltipContent
+        side={side}
+        sideOffset={sideOffset}
+        hidden={hidden}
+        align={align}
+        className="text-pretty border bg-popover text-popover-foreground"
+      >
         {title}
       </TooltipContent>
     </Tooltip>

src/stories/Tooltip/Tooltip.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { TooltipApp } from '../../components/ui/tooltip.tsx'
+import { Tooltip } from '../../components/ui/tooltip.tsx'
 import { Button } from '../../components/ui/button.tsx'
 import { expect, within } from 'storybook/test'
 
-const meta: Meta<typeof TooltipApp> = {
+const meta: Meta<typeof Tooltip> = {
   title: 'Components/Tooltip',
-  component: TooltipApp,
+  component: Tooltip,
   parameters: {
     docs: {
       description: {