fix(tooltip): prevent popover arrow clipping

CHANGELOG.md

@@ -31,6 +31,10 @@
 - Range component: added range-vertical modifier for vertical orientation (DaisyUI 5.6)
 - Tooltip component: added alignment modifiers (tooltip-start, tooltip-center, tooltip-end) and tooltip-content sub-component (DaisyUI 5.6)
 
+### Fixed
+
+- Popover tooltips no longer clip arrows that extend beyond the tooltip card.
+
 ## [0.1.0] - 2024-08-02
 
 - Initial release

docs/spec/system/tooltip_popover_spec.rb

@@ -38,11 +38,15 @@
         const arrow = tooltip.querySelector('[data-daisy-tooltip-target~="arrow"]')
         const arrowStyle = getComputedStyle(arrow)
         const arrowBounds = arrow.getBoundingClientRect()
+        const tooltipBounds = tooltip.getBoundingClientRect()
 
         return {
           stockArrowDisplay: getComputedStyle(host, "::after").display,
+          tooltipOverflow: getComputedStyle(tooltip).overflow,
           width: arrowBounds.width,
           height: arrowBounds.height,
+          arrowBottom: arrowBounds.bottom,
+          tooltipBottom: tooltipBounds.bottom,
           background: arrowStyle.backgroundColor,
           tooltipBackground: getComputedStyle(tooltip).backgroundColor,
           borders: [
@@ -56,8 +60,10 @@
     JS
 
     expect(arrow.fetch("stockArrowDisplay")).to eq("none")
+    expect(arrow.fetch("tooltipOverflow")).to eq("visible")
     expect(arrow.fetch("width")).to be > 0
     expect(arrow.fetch("height")).to be > 0
+    expect(arrow.fetch("arrowBottom")).to be > arrow.fetch("tooltipBottom")
     expect(arrow.fetch("background")).to eq(arrow.fetch("tooltipBackground"))
     expect(arrow.fetch("borders")).to all(eq("0px"))
 

lib/daisy_ui/tooltip.rb

@@ -8,7 +8,8 @@ class Tooltip < Base
 
     PLACEMENTS = %i[top bottom left right].freeze
     DEFAULT_STIMULUS_IDENTIFIER = "daisy-tooltip"
-    POPOVER_STYLE = "position:fixed;inset:auto;margin:0;border:0;opacity:1;transform:none;pointer-events:none;visibility:hidden"
+    POPOVER_STYLE = "position:fixed;inset:auto;margin:0;border:0;opacity:1;transform:none;overflow:visible;" \
+                    "pointer-events:none;visibility:hidden"
     ARROW_STYLE = "position:absolute;width:.625rem;height:.25rem;background:var(--tt-bg);" \
                   "clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none"
 

spec/lib/daisy_ui/tooltip_spec.rb

@@ -196,6 +196,7 @@ def popover_component(*modifiers, **options)
       expect(output).to include('role="tooltip"')
       expect(output).to include('data-daisy-tooltip-target="content"')
       expect(output).to include('data-daisy-tooltip-target="arrow"')
+      expect(output).to include("overflow:visible")
       expect(output).to include("Helpful details")
       expect(output).not_to include("data-tip")
     end