diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b936e1..2cf7b85 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/spec/system/tooltip_popover_spec.rb b/docs/spec/system/tooltip_popover_spec.rb index 06b8971..4da8e0a 100644 --- a/docs/spec/system/tooltip_popover_spec.rb +++ b/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")) diff --git a/lib/daisy_ui/tooltip.rb b/lib/daisy_ui/tooltip.rb index 8824213..52d7836 100644 --- a/lib/daisy_ui/tooltip.rb +++ b/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" diff --git a/spec/lib/daisy_ui/tooltip_spec.rb b/spec/lib/daisy_ui/tooltip_spec.rb index e7627d3..60de701 100644 --- a/spec/lib/daisy_ui/tooltip_spec.rb +++ b/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