@moontra/moonui 4.1.0 → 5.0.1

package/src/components/ui/__tests__/tooltip.test.tsx

@@ -1,7 +1,25 @@
 import React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { render as rtlRender, screen, fireEvent, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Tooltip } from '../tooltip'
+import { SimpleTooltip as Tooltip, TooltipProvider } from '../tooltip'
+
+// GERÇEK API NOTLARI (kaynak: ../tooltip.tsx — Radix `@radix-ui/react-tooltip` üzerine kurulu)
+//
+// 1) Testler `<Tooltip content=... >` API'sini kullanıyor; bu `SimpleTooltip`in yüzeyi.
+//    Dışa açılan `Tooltip` ise ham `TooltipPrimitive.Root` — `content` prop'u yok.
+// 2) Radix, Tooltip'in bir `TooltipProvider` atası altında olmasını ZORUNLU kılar
+//    ("`Tooltip` must be used within `TooltipProvider`") ve SimpleTooltip kendi
+//    sağlayıcısını taşımaz. Tüm render'lar sağlayıcıyla sarılır.
+// 3) Radix, stilli içerik kutusunun İÇİNE `role="tooltip"` taşıyan görsel-gizli bir
+//    `span` koyar (erişilebilir isim buradan okunur). Yani `getByRole('tooltip')`
+//    sr-only span'i döndürür; CVA sınıflarını taşıyan kutu onun EBEVEYNİdir
+//    (`getTooltipContent`). İçerik metni DOM'a iki kez düşer (kutu + sr-only kopya),
+//    bu yüzden tekil `getByText` sorguları "multiple elements" ile patlar.
+// 4) Gerçek varyant/boyut listesi `tooltipVariants` CVA'sından gelir:
+//    variant: default|secondary|success|warning|destructive|info, size: sm|md|lg.
+//    `radius`, `shadow`, `primary`, `caution` gibi prop/değerler API'de YOKTUR —
+//    yuvarlaklık ve gölge temel (base) sınıflardan gelir, `className` ile ezilir.
+// 5) `sideOffset` Radix Popper'a gider ve konumu sarmalayıcı `transform`una yansır.
 
 // Mock next-themes
 jest.mock('next-themes', () => ({
@@ -10,10 +28,38 @@ jest.mock('next-themes', () => ({
   }),
 }))
 
-
+const render: typeof rtlRender = (ui: any, options?: any) =>
+  rtlRender(<TooltipProvider>{ui}</TooltipProvider>, options)
+
+// CVA sınıflarını taşıyan görünür içerik kutusu (sr-only tooltip span'inin ebeveyni)
+const getTooltipContent = () => screen.getByRole('tooltip').parentElement as HTMLElement
+
+// Radix Popper'ın konumlandırma sarmalayıcısı (transform burada uygulanır)
+const getPopperWrapper = () => getTooltipContent().parentElement as HTMLElement
+
+// Tooltip'i hover ile açar ve açılmasını bekler
+const openByHover = async (
+  user: ReturnType<typeof userEvent.setup>,
+  trigger: HTMLElement
+) => {
+  await user.hover(trigger)
+  await screen.findByRole('tooltip')
+}
+
+// Radix varsayılan olarak "hoverable content" kullanır: tetikleyiciden çıkmak tek
+// başına kapatmaz, imlecin tetikleyici+içerik arasındaki grace-area'nın DIŞINA
+// gerçekten hareket etmesi beklenir (kullanıcı tooltip'in üzerine gidebilsin diye).
+// jsdom'da tüm rect'ler 0 olduğundan bu hareketi açıkça üretmek gerekir.
+const movePointerAway = async (
+  user: ReturnType<typeof userEvent.setup>,
+  trigger: HTMLElement
+) => {
+  await user.unhover(trigger)
+  fireEvent.pointerMove(document.body, { clientX: 400, clientY: 400 })
+}
 
 describe('Tooltip Components', () => {
-  describe('Tooltip Component', () => {
+  describe('SimpleTooltip Component', () => {
     describe('Basic Rendering', () => {
       it('renders correctly with default props', () => {
         render(
@@ -21,9 +67,11 @@ describe('Tooltip Components', () => {
             <button>Hover me</button>
           </Tooltip>
         )
-        
+
         expect(screen.getByRole('button')).toBeInTheDocument()
         expect(screen.getByText('Hover me')).toBeInTheDocument()
+        // Kapalıyken içerik DOM'da olmamalı
+        expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
       })
 
       it('shows tooltip on hover', async () => {
@@ -33,14 +81,15 @@ describe('Tooltip Components', () => {
             <button>Hover me</button>
           </Tooltip>
         )
-        
+
         const trigger = screen.getByRole('button')
         await user.hover(trigger)
-        
+
         await waitFor(() => {
           expect(screen.getByRole('tooltip')).toBeInTheDocument()
-          expect(screen.getByText('Test tooltip')).toBeInTheDocument()
         })
+        expect(screen.getByRole('tooltip')).toHaveTextContent('Test tooltip')
+        expect(getTooltipContent()).toHaveTextContent('Test tooltip')
       })
 
       it('hides tooltip on mouse leave', async () => {
@@ -50,131 +99,181 @@ describe('Tooltip Components', () => {
             <button>Hover me</button>
           </Tooltip>
         )
-        
+
         const trigger = screen.getByRole('button')
         await user.hover(trigger)
-        
+
         await waitFor(() => {
           expect(screen.getByRole('tooltip')).toBeInTheDocument()
         })
-        
-        await user.unhover(trigger)
-        
+
+        await movePointerAway(user, trigger)
+
         await waitFor(() => {
           expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
         })
       })
 
-      it('applies custom className', () => {
+      it('links trigger to tooltip via aria-describedby', async () => {
+        const user = userEvent.setup()
         render(
-          <Tooltip content="Test tooltip" className="custom-tooltip">
+          <Tooltip content="Test tooltip" delayDuration={0}>
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const wrapper = screen.getByRole('button').parentElement
-        expect(wrapper).toHaveClass('relative', 'inline-block')
+
+        const trigger = screen.getByRole('button')
+        expect(trigger).not.toHaveAttribute('aria-describedby')
+
+        await openByHover(user, trigger)
+
+        // Açıkken tetikleyici, sr-only tooltip düğümünü tarif eder
+        expect(trigger).toHaveAttribute('aria-describedby', screen.getByRole('tooltip').id)
+        expect(trigger).toHaveAttribute('data-state', 'delayed-open')
+      })
+
+      it('applies custom className', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" className="custom-tooltip" delayDuration={0}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+
+        await openByHover(user, screen.getByRole('button'))
+
+        // className TooltipContent'e iner (SimpleTooltip → TooltipContent)
+        expect(getTooltipContent()).toHaveClass('custom-tooltip')
       })
 
       it('has correct displayName', () => {
-        expect(Tooltip.displayName || Tooltip.name || 'Tooltip').toBe('Tooltip')
+        expect(Tooltip.displayName).toBe('SimpleTooltip')
       })
     })
 
     describe('Variants', () => {
-      const variants = ['primary', 'secondary', 'success', 'caution', 'destructive', 'info'] as const
-
-      variants.forEach((variant) => {
+      // tooltipVariants CVA'sındaki gerçek varyantlar ve ürettikleri sınıflar
+      const variants = [
+        { variant: 'default', className: 'bg-primary', textClassName: 'text-primary-foreground' },
+        { variant: 'secondary', className: 'bg-secondary', textClassName: 'text-secondary-foreground' },
+        { variant: 'success', className: 'bg-green-500', textClassName: 'text-white' },
+        { variant: 'warning', className: 'bg-yellow-500', textClassName: 'text-white' },
+        { variant: 'destructive', className: 'bg-destructive', textClassName: 'text-destructive-foreground' },
+        { variant: 'info', className: 'bg-blue-500', textClassName: 'text-white' },
+      ] as const
+
+      variants.forEach(({ variant, className, textClassName }) => {
         it(`renders ${variant} variant correctly`, async () => {
           const user = userEvent.setup()
           render(
-            <Tooltip content="Test tooltip" variant={variant}>
+            <Tooltip content="Test tooltip" variant={variant} delayDuration={0}>
               <button>Hover me</button>
             </Tooltip>
           )
-          
-          const trigger = screen.getByRole('button')
-          await user.hover(trigger)
-          
-          await waitFor(() => {
-            const tooltip = screen.getByRole('tooltip')
-            expect(tooltip).toBeInTheDocument()
-            expect(tooltip).toHaveClass(`bg-${variant}`)
-          })
+
+          await openByHover(user, screen.getByRole('button'))
+
+          const tooltip = getTooltipContent()
+          expect(tooltip).toBeInTheDocument()
+          expect(tooltip).toHaveClass(className)
+          expect(tooltip).toHaveClass(textClassName)
         })
       })
     })
 
     describe('Sizes', () => {
-      const sizes = ['sm', 'md', 'lg'] as const
-
-      sizes.forEach((size) => {
+      // Boyut sınıfları tooltipVariants üzerinden gelir (twMerge base padding'i ezer)
+      const sizes = [
+        { size: 'sm', classes: ['px-2', 'py-1', 'text-xs'] },
+        { size: 'md', classes: ['px-3', 'py-1.5', 'text-sm'] },
+        { size: 'lg', classes: ['px-4', 'py-2', 'text-base'] },
+      ] as const
+
+      sizes.forEach(({ size, classes }) => {
         it(`renders ${size} size correctly`, async () => {
           const user = userEvent.setup()
           render(
-            <Tooltip content="Test tooltip" size={size}>
+            <Tooltip content="Test tooltip" size={size} delayDuration={0}>
               <button>Hover me</button>
             </Tooltip>
           )
-          
-          const trigger = screen.getByRole('button')
-          await user.hover(trigger)
-          
-          await waitFor(() => {
-            const tooltip = screen.getByRole('tooltip')
-            expect(tooltip).toBeInTheDocument()
-            // Size classes are applied through tooltipVariants
-            expect(tooltip).toHaveAttribute('class')
-          })
+
+          await openByHover(user, screen.getByRole('button'))
+
+          const tooltip = getTooltipContent()
+          expect(tooltip).toBeInTheDocument()
+          classes.forEach((cls) => expect(tooltip).toHaveClass(cls))
         })
       })
     })
 
-    describe('Radius', () => {
-      const radiusOptions = ['none', 'sm', 'md', 'lg', 'full'] as const
+    describe('Base Styling', () => {
+      // `radius` / `shadow` prop'ları YOK; yuvarlaklık, kenarlık ve gölge base sınıflarda sabit
+      it('applies base radius, border, shadow and layering classes', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" delayDuration={0}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
 
-      radiusOptions.forEach((radius) => {
-        it(`renders ${radius} radius correctly`, async () => {
-          const user = userEvent.setup()
-          render(
-            <Tooltip content="Test tooltip" radius={radius}>
-              <button>Hover me</button>
-            </Tooltip>
-          )
-          
-          const trigger = screen.getByRole('button')
-          await user.hover(trigger)
-          
-          await waitFor(() => {
-            const tooltip = screen.getByRole('tooltip')
-            expect(tooltip).toBeInTheDocument()
-            expect(tooltip).toHaveClass(`rounded-${radius === 'none' ? 'none' : radius}`)
-          })
-        })
+        await openByHover(user, screen.getByRole('button'))
+
+        const tooltip = getTooltipContent()
+        expect(tooltip).toHaveClass('rounded-md')
+        expect(tooltip).toHaveClass('border')
+        expect(tooltip).toHaveClass('shadow-md')
+        expect(tooltip).toHaveClass('z-50')
+        expect(tooltip).toHaveClass('overflow-hidden')
+        expect(tooltip).toHaveClass('moonui-theme')
+      })
+
+      it('lets className override radius and shadow tokens', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" className="rounded-none shadow-none" delayDuration={0}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+
+        await openByHover(user, screen.getByRole('button'))
+
+        // cn() = twMerge → çakışan token'lar className lehine çözülür
+        const tooltip = getTooltipContent()
+        expect(tooltip).toHaveClass('rounded-none')
+        expect(tooltip).toHaveClass('shadow-none')
+        expect(tooltip).not.toHaveClass('rounded-md')
+        expect(tooltip).not.toHaveClass('shadow-md')
       })
     })
 
-    describe('Shadow', () => {
-      const shadowOptions = ['none', 'sm', 'md', 'lg'] as const
+    describe('Arrow', () => {
+      it('does not render arrow by default', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" delayDuration={0}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
 
-      shadowOptions.forEach((shadow) => {
-        it(`renders ${shadow} shadow correctly`, async () => {
-          const user = userEvent.setup()
-          render(
-            <Tooltip content="Test tooltip" shadow={shadow}>
-              <button>Hover me</button>
-            </Tooltip>
-          )
-          
-          const trigger = screen.getByRole('button')
-          await user.hover(trigger)
-          
-          await waitFor(() => {
-            const tooltip = screen.getByRole('tooltip')
-            expect(tooltip).toBeInTheDocument()
-            expect(tooltip).toHaveClass(`shadow-${shadow}`)
-          })
-        })
+        await openByHover(user, screen.getByRole('button'))
+
+        expect(getTooltipContent().querySelector('svg')).toBeNull()
+      })
+
+      it('renders arrow when showArrow is true', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" showArrow delayDuration={0}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+
+        await openByHover(user, screen.getByRole('button'))
+
+        const arrow = getTooltipContent().querySelector('svg')
+        expect(arrow).not.toBeNull()
+        expect(arrow).toHaveClass('fill-current')
       })
     })
 
@@ -185,20 +284,20 @@ describe('Tooltip Components', () => {
         it(`renders ${side} position correctly`, async () => {
           const user = userEvent.setup()
           render(
-            <Tooltip content="Test tooltip" side={side}>
+            // jsdom'da görünür alan 0×0'dır; çarpışma kaçınması açık kalırsa Radix
+            // istenen tarafı ters çevirir. İstenen tarafın gerçekten iletildiğini
+            // ölçmek için collision davranışı kapatılır.
+            <Tooltip content="Test tooltip" side={side} delayDuration={0} avoidCollisions={false}>
               <button>Hover me</button>
             </Tooltip>
           )
-          
-          const trigger = screen.getByRole('button')
-          await user.hover(trigger)
-          
-          await waitFor(() => {
-            const tooltip = screen.getByRole('tooltip')
-            expect(tooltip).toBeInTheDocument()
-            // Position classes are applied through sideClasses
-            expect(tooltip).toHaveAttribute('class')
-          })
+
+          await openByHover(user, screen.getByRole('button'))
+
+          const tooltip = getTooltipContent()
+          expect(tooltip).toBeInTheDocument()
+          // Konum Radix tarafından data-side ile yayınlanır (stil sınıfları buna bağlanır)
+          expect(tooltip).toHaveAttribute('data-side', side)
         })
       })
 
@@ -208,20 +307,16 @@ describe('Tooltip Components', () => {
         it(`renders ${align} alignment correctly`, async () => {
           const user = userEvent.setup()
           render(
-            <Tooltip content="Test tooltip" align={align}>
+            <Tooltip content="Test tooltip" align={align} delayDuration={0}>
               <button>Hover me</button>
             </Tooltip>
           )
-          
-          const trigger = screen.getByRole('button')
-          await user.hover(trigger)
-          
-          await waitFor(() => {
-            const tooltip = screen.getByRole('tooltip')
-            expect(tooltip).toBeInTheDocument()
-            // Alignment classes are applied through alignClasses
-            expect(tooltip).toHaveAttribute('class')
-          })
+
+          await openByHover(user, screen.getByRole('button'))
+
+          const tooltip = getTooltipContent()
+          expect(tooltip).toBeInTheDocument()
+          expect(tooltip).toHaveAttribute('data-align', align)
         })
       })
     })
@@ -234,10 +329,10 @@ describe('Tooltip Components', () => {
             <button>Hover me</button>
           </Tooltip>
         )
-        
+
         const trigger = screen.getByRole('button')
         await user.hover(trigger)
-        
+
         // Should appear after 100ms
         await waitFor(() => {
           expect(screen.getByRole('tooltip')).toBeInTheDocument()
@@ -251,10 +346,10 @@ describe('Tooltip Components', () => {
             <button>Hover me</button>
           </Tooltip>
         )
-        
+
         const trigger = screen.getByRole('button')
         await user.hover(trigger)
-        
+
         // Should appear immediately
         await waitFor(() => {
           expect(screen.getByRole('tooltip')).toBeInTheDocument()
@@ -266,19 +361,28 @@ describe('Tooltip Components', () => {
       it('applies custom side offset', async () => {
         const user = userEvent.setup()
         render(
-          <Tooltip content="Test tooltip" sideOffset={10}>
+          <Tooltip content="Test tooltip" sideOffset={10} delayDuration={0}>
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
-        await waitFor(() => {
-          const tooltip = screen.getByRole('tooltip')
-          expect(tooltip).toBeInTheDocument()
-          expect(tooltip).toHaveStyle({ marginBottom: '10px' })
-        })
+
+        await openByHover(user, screen.getByRole('button'))
+
+        // sideOffset Popper'a gider: side="top" için içerik 10px yukarı ötelenir
+        expect(getPopperWrapper()).toHaveStyle({ transform: 'translate(0px, -10px)' })
+      })
+
+      it('applies zero side offset', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" sideOffset={0} delayDuration={0}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+
+        await openByHover(user, screen.getByRole('button'))
+
+        expect(getPopperWrapper()).toHaveStyle({ transform: 'translate(0px, 0px)' })
       })
     })
 
@@ -286,33 +390,31 @@ describe('Tooltip Components', () => {
       it('renders text content', async () => {
         const user = userEvent.setup()
         render(
-          <Tooltip content="Simple text">
+          <Tooltip content="Simple text" delayDuration={0}>
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
-        await waitFor(() => {
-          expect(screen.getByText('Simple text')).toBeInTheDocument()
-        })
+
+        await openByHover(user, screen.getByRole('button'))
+
+        expect(getTooltipContent()).toHaveTextContent('Simple text')
+        expect(screen.getByRole('tooltip')).toHaveTextContent('Simple text')
       })
 
       it('renders JSX content', async () => {
         const user = userEvent.setup()
         render(
-          <Tooltip content={<div data-testid="jsx-content">JSX Content</div>}>
+          <Tooltip content={<div data-testid="jsx-content">JSX Content</div>} delayDuration={0}>
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
-        await waitFor(() => {
-          expect(screen.getByTestId('jsx-content')).toBeInTheDocument()
-        })
+
+        await openByHover(user, screen.getByRole('button'))
+
+        const tooltip = getTooltipContent()
+        // Radix içeriği sr-only kopyada da render eder → ilk düğüm görünür olandır
+        expect(within(tooltip).getAllByTestId('jsx-content')[0]).toBeInTheDocument()
+        expect(tooltip).toHaveTextContent('JSX Content')
       })
 
       it('renders complex content', async () => {
@@ -323,20 +425,18 @@ describe('Tooltip Components', () => {
             <p>Description</p>
           </div>
         )
-        
+
         render(
-          <Tooltip content={complexContent}>
+          <Tooltip content={complexContent} delayDuration={0}>
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
-        await waitFor(() => {
-          expect(screen.getByText('Title')).toBeInTheDocument()
-          expect(screen.getByText('Description')).toBeInTheDocument()
-        })
+
+        await openByHover(user, screen.getByRole('button'))
+
+        const tooltip = getTooltipContent()
+        expect(within(tooltip).getAllByText('Title')[0]).toBeInTheDocument()
+        expect(within(tooltip).getAllByText('Description')[0]).toBeInTheDocument()
       })
     })
 
@@ -347,10 +447,10 @@ describe('Tooltip Components', () => {
             <button>Focus me</button>
           </Tooltip>
         )
-        
+
         const trigger = screen.getByRole('button')
         fireEvent.focus(trigger)
-        
+
         await waitFor(() => {
           expect(screen.getByRole('tooltip')).toBeInTheDocument()
         })
@@ -362,87 +462,58 @@ describe('Tooltip Components', () => {
             <button>Focus me</button>
           </Tooltip>
         )
-        
+
         const trigger = screen.getByRole('button')
         fireEvent.focus(trigger)
-        
+
         await waitFor(() => {
           expect(screen.getByRole('tooltip')).toBeInTheDocument()
         })
-        
+
         fireEvent.blur(trigger)
-        
+
         await waitFor(() => {
           expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
         })
       })
     })
 
-    describe('Complex Combinations', () => {
-      it('renders with all props', async () => {
+    describe('Controlled State', () => {
+      it('renders open when defaultOpen is set and reports changes', async () => {
+        const onOpenChange = jest.fn()
         const user = userEvent.setup()
         render(
-          <Tooltip
-            content="Complex tooltip"
-            variant="success"
-            size="lg"
-            radius="lg"
-            shadow="lg"
-            side="bottom"
-            align="end"
-            delayDuration={50}
-            sideOffset={8}
-            className="custom-tooltip"
-          >
-            <button>Complex button</button>
+          <Tooltip content="Test tooltip" defaultOpen onOpenChange={onOpenChange}>
+            <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
+
+        expect(screen.getByRole('tooltip')).toBeInTheDocument()
+
+        await user.hover(screen.getByRole('button'))
+        await movePointerAway(user, screen.getByRole('button'))
+
         await waitFor(() => {
-          const tooltip = screen.getByRole('tooltip')
-          expect(tooltip).toBeInTheDocument()
-          expect(tooltip).toHaveClass('bg-success')
-          expect(tooltip).toHaveClass('rounded-lg')
-          expect(tooltip).toHaveClass('shadow-lg')
-          expect(tooltip).toHaveStyle({ marginTop: '8px' })
+          expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
         })
+        expect(onOpenChange).toHaveBeenCalledWith(false)
       })
 
-      it('works with different trigger elements', async () => {
+      it('stays open while controlled open is true', async () => {
         const user = userEvent.setup()
         render(
-          <div>
-            <Tooltip content="Button tooltip">
-              <button data-testid="tooltip-button">Button</button>
-            </Tooltip>
-            <Tooltip content="Link tooltip">
-              <a href="#" role="link">Link</a>
-            </Tooltip>
-            <Tooltip content="Div tooltip">
-              <div role="button" tabIndex={0}>Div</div>
-            </Tooltip>
-          </div>
+          <Tooltip content="Test tooltip" open>
+            <button>Hover me</button>
+          </Tooltip>
         )
-        
-        // Test button
-        await user.hover(screen.getByTestId('tooltip-button'))
-        await waitFor(() => {
-          expect(screen.getByText('Button tooltip')).toBeInTheDocument()
-        })
-        
-        await user.unhover(screen.getByTestId('tooltip-button'))
-        await waitFor(() => {
-          expect(screen.queryByText('Button tooltip')).not.toBeInTheDocument()
-        })
-        
-        // Test link
-        await user.hover(screen.getByRole('link'))
-        await waitFor(() => {
-          expect(screen.getByText('Link tooltip')).toBeInTheDocument()
-        })
+
+        expect(screen.getByRole('tooltip')).toBeInTheDocument()
+
+        await user.hover(screen.getByRole('button'))
+        await movePointerAway(user, screen.getByRole('button'))
+
+        // Kontrollü `open` dışarıdan yönetilir; iç etkileşim kapatamaz
+        expect(screen.getByRole('tooltip')).toBeInTheDocument()
       })
     })
 
@@ -450,57 +521,46 @@ describe('Tooltip Components', () => {
       it('handles empty content', async () => {
         const user = userEvent.setup()
         render(
-          <Tooltip content="">
+          <Tooltip content="" delayDuration={0}>
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
-        await waitFor(() => {
-          const tooltip = screen.getByRole('tooltip')
-          expect(tooltip).toBeInTheDocument()
-          expect(tooltip).toBeEmptyDOMElement()
-        })
+
+        await openByHover(user, screen.getByRole('button'))
+
+        const tooltip = screen.getByRole('tooltip')
+        expect(tooltip).toBeInTheDocument()
+        expect(tooltip).toBeEmptyDOMElement()
       })
 
       it('handles null content', async () => {
         const user = userEvent.setup()
         render(
-          <Tooltip content={null}>
+          <Tooltip content={null} delayDuration={0}>
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
-        await waitFor(() => {
-          const tooltip = screen.getByRole('tooltip')
-          expect(tooltip).toBeInTheDocument()
-        })
+
+        await openByHover(user, screen.getByRole('button'))
+
+        expect(screen.getByRole('tooltip')).toBeInTheDocument()
       })
 
       it('handles undefined content', async () => {
         const user = userEvent.setup()
         render(
-          <Tooltip content={undefined as React.ReactNode}>
+          <Tooltip content={undefined as React.ReactNode} delayDuration={0}>
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
-        await waitFor(() => {
-          const tooltip = screen.getByRole('tooltip')
-          expect(tooltip).toBeInTheDocument()
-        })
+
+        await openByHover(user, screen.getByRole('button'))
+
+        expect(screen.getByRole('tooltip')).toBeInTheDocument()
       })
 
       it('handles single child requirement', () => {
-        // Tooltip component expects single child due to React.Children.only
+        // TooltipTrigger `asChild` ile tek bir çocuk bekler; sarmalayıcı div ile birden fazla düğüm taşınır
         render(
           <Tooltip content="Test tooltip">
             <div>
@@ -509,7 +569,7 @@ describe('Tooltip Components', () => {
             </div>
           </Tooltip>
         )
-        
+
         // Should render both buttons wrapped in div
         expect(screen.getByText('Button 1')).toBeInTheDocument()
         expect(screen.getByText('Button 2')).toBeInTheDocument()
@@ -518,24 +578,23 @@ describe('Tooltip Components', () => {
       it('passes through HTML attributes', async () => {
         const user = userEvent.setup()
         render(
-          <Tooltip 
-            content="Test tooltip" 
-            data-testid="tooltip-wrapper"
+          <Tooltip
+            content="Test tooltip"
+            delayDuration={0}
+            data-testid="tooltip-content"
             aria-label="Custom tooltip"
           >
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
-        await waitFor(() => {
-          const tooltip = screen.getByRole('tooltip')
-          expect(tooltip).toBeInTheDocument()
-          expect(tooltip).toHaveAttribute('data-testid', 'tooltip-wrapper')
-          expect(tooltip).toHaveAttribute('aria-label', 'Custom tooltip')
-        })
+
+        await openByHover(user, screen.getByRole('button'))
+
+        // Fazladan prop'lar TooltipContent'e (görünür kutuya) iner
+        const tooltip = getTooltipContent()
+        expect(tooltip).toHaveAttribute('data-testid', 'tooltip-content')
+        // `aria-label` Radix tarafından tüketilir: erişilebilir tooltip metnini o belirler
+        expect(screen.getByRole('tooltip')).toHaveTextContent('Custom tooltip')
       })
 
       it('handles rapid hover/unhover', async () => {
@@ -545,14 +604,14 @@ describe('Tooltip Components', () => {
             <button>Hover me</button>
           </Tooltip>
         )
-        
+
         const trigger = screen.getByRole('button')
-        
+
         // Rapid hover/unhover
         await user.hover(trigger)
         await user.unhover(trigger)
         await user.hover(trigger)
-        
+
         await waitFor(() => {
           expect(screen.getByRole('tooltip')).toBeInTheDocument()
         })
@@ -561,21 +620,85 @@ describe('Tooltip Components', () => {
       it('handles very long content', async () => {
         const user = userEvent.setup()
         const longContent = 'This is a very long tooltip content that should wrap properly and not break the layout. '.repeat(10)
-        
+
         render(
-          <Tooltip content={longContent}>
+          <Tooltip content={longContent} delayDuration={0}>
             <button>Hover me</button>
           </Tooltip>
         )
-        
-        const trigger = screen.getByRole('button')
-        await user.hover(trigger)
-        
+
+        await openByHover(user, screen.getByRole('button'))
+
+        const tooltip = screen.getByRole('tooltip')
+        expect(tooltip).toBeInTheDocument()
+        // Check if content contains the expected text (ignoring whitespace differences)
+        expect(tooltip.textContent?.trim()).toContain('This is a very long tooltip content')
+      })
+    })
+
+    describe('Complex Combinations', () => {
+      it('renders with all props', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip
+            content="Complex tooltip"
+            variant="success"
+            size="lg"
+            side="bottom"
+            align="end"
+            delayDuration={50}
+            sideOffset={8}
+            showArrow
+            className="custom-tooltip"
+          >
+            <button>Complex button</button>
+          </Tooltip>
+        )
+
+        await openByHover(user, screen.getByRole('button'))
+
+        const tooltip = getTooltipContent()
+        expect(tooltip).toBeInTheDocument()
+        expect(tooltip).toHaveClass('bg-green-500')
+        expect(tooltip).toHaveClass('text-base')
+        expect(tooltip).toHaveClass('custom-tooltip')
+        expect(tooltip).toHaveAttribute('data-side', 'bottom')
+        expect(tooltip).toHaveAttribute('data-align', 'end')
+        expect(tooltip.querySelector('svg')).not.toBeNull()
+        expect(getPopperWrapper()).toHaveStyle({ transform: 'translate(0px, 8px)' })
+      })
+
+      it('works with different trigger elements', async () => {
+        const user = userEvent.setup()
+        render(
+          <div>
+            <Tooltip content="Button tooltip" delayDuration={0}>
+              <button data-testid="tooltip-button">Button</button>
+            </Tooltip>
+            <Tooltip content="Link tooltip" delayDuration={0}>
+              <a href="#" role="link">Link</a>
+            </Tooltip>
+            <Tooltip content="Div tooltip" delayDuration={0}>
+              <div role="button" tabIndex={0}>Div</div>
+            </Tooltip>
+          </div>
+        )
+
+        // Test button
+        await user.hover(screen.getByTestId('tooltip-button'))
         await waitFor(() => {
-          const tooltip = screen.getByRole('tooltip')
-          expect(tooltip).toBeInTheDocument()
-          // Check if content contains the expected text (ignoring whitespace differences)
-          expect(tooltip.textContent?.trim()).toContain('This is a very long tooltip content')
+          expect(screen.getByRole('tooltip')).toHaveTextContent('Button tooltip')
+        })
+
+        await movePointerAway(user, screen.getByTestId('tooltip-button'))
+        await waitFor(() => {
+          expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+        })
+
+        // Test link
+        await user.hover(screen.getByRole('link'))
+        await waitFor(() => {
+          expect(screen.getByRole('tooltip')).toHaveTextContent('Link tooltip')
         })
       })
     })