From b7a6ebd2282cbc90312b2ea0f21c5da360c7e469 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 30 Jul 2025 14:08:26 -0400
Subject: [PATCH] add without-arrow to hide arrows without artifacts (#1253)

---
 packages/webawesome/docs/docs/components/popover.md   | 4 ++--
 packages/webawesome/docs/docs/components/tooltip.md   | 4 ++--
 packages/webawesome/docs/docs/resources/changelog.md  | 3 ++-
 packages/webawesome/src/components/popover/popover.ts | 5 ++++-
 packages/webawesome/src/components/tooltip/tooltip.ts | 5 ++++-
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/webawesome/docs/docs/components/popover.md b/packages/webawesome/docs/docs/components/popover.md
index 39014dd8b..a6a3e61fa 100644
--- a/packages/webawesome/docs/docs/components/popover.md
+++ b/packages/webawesome/docs/docs/components/popover.md
@@ -91,7 +91,7 @@ Use the `distance` attribute to control how far the popover appears from its anc
 
 ### Arrow Size
 
-Use the `--arrow-size` custom property to change the size of the popover's arrow. Set it to `0` to remove the arrow entirely.
+Use the `--arrow-size` custom property to change the size of the popover's arrow. To remove it, use the `without-arrow` attribute.
 
 ```html {.example}
 <div style="display: flex; gap: 1rem; align-items: center;">
@@ -99,7 +99,7 @@ Use the `--arrow-size` custom property to change the size of the popover's arrow
   <wa-popover for="popover__big-arrow" style="--arrow-size: 8px;">I have a big arrow</wa-popover>
 
   <wa-button id="popover__no-arrow">No arrow</wa-button>
-  <wa-popover for="popover__no-arrow" style="--arrow-size: 0;">I don't have an arrow</wa-popover>
+  <wa-popover for="popover__no-arrow" without-arrow>I don't have an arrow</wa-popover>
 </div>
 ```
 
diff --git a/packages/webawesome/docs/docs/components/tooltip.md b/packages/webawesome/docs/docs/components/tooltip.md
index 7faf2bb70..e76b618e4 100644
--- a/packages/webawesome/docs/docs/components/tooltip.md
+++ b/packages/webawesome/docs/docs/components/tooltip.md
@@ -113,11 +113,11 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t
 
 ### Removing Arrows
 
-You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove them, set the value to `0` as shown below.
+You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove the arrow, use the `without-arrow` attribute.
 
 ```html {.example}
 <wa-button id="no-arrow">No Arrow</wa-button>
-<wa-tooltip for="no-arrow" style="--wa-tooltip-arrow-size: 0;">This is a tooltip with no arrow</wa-tooltip>
+<wa-tooltip for="no-arrow" without-arrow>This is a tooltip with no arrow</wa-tooltip>
 ```
 
 To override it globally, set it in a root block in your stylesheet after the Web Awesome stylesheet is loaded.
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 77b1c94f4..071d71803 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -13,8 +13,9 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 ### New Features {data-no-outline}
 
 - Added the `icon-position` attribute to `<wa-details>` [discuss:1099]
-- Added the `animating` custom state to `<wa-details>`
+- Added the `animating` custom state to `<wa-details>` [pr:1214]
 - Added `--wa-tooltip-border-color`, `--wa-tooltip-border-style`, and `--wa-tooltip-border-width` tokens [issue:1224]
+- Added the `without-arrow` attribute to `<wa-popover>` and `<wa-tooltip>` to hide arrows without artifacts
 
 ### Bug Fixes and Improvements {data-no-outline}
 
diff --git a/packages/webawesome/src/components/popover/popover.ts b/packages/webawesome/src/components/popover/popover.ts
index 331b9d871..376263663 100644
--- a/packages/webawesome/src/components/popover/popover.ts
+++ b/packages/webawesome/src/components/popover/popover.ts
@@ -85,6 +85,9 @@ export default class WaPopover extends WebAwesomeElement {
   /** The ID of the popover's anchor element. This must be an interactive/focusable element such as a button. */
   @property() for: string | null = null;
 
+  /** Removes the arrow from the popover. */
+  @property({ attribute: 'without-arrow', type: Boolean, reflect: true }) withoutArrow = false;
+
   private eventController = new AbortController();
 
   connectedCallback() {
@@ -300,7 +303,7 @@ export default class WaPopover extends WebAwesomeElement {
           skidding=${this.skidding}
           flip
           shift
-          arrow
+          ?arrow=${!this.withoutArrow}
           .anchor=${this.anchor}
         >
           <div part="body" class="body" @click=${this.handleBodyClick}>
diff --git a/packages/webawesome/src/components/tooltip/tooltip.ts b/packages/webawesome/src/components/tooltip/tooltip.ts
index 4b0720c17..e4c103d94 100644
--- a/packages/webawesome/src/components/tooltip/tooltip.ts
+++ b/packages/webawesome/src/components/tooltip/tooltip.ts
@@ -89,6 +89,9 @@ export default class WaTooltip extends WebAwesomeElement {
    */
   @property() trigger = 'hover focus';
 
+  /** Removes the arrow from the tooltip. */
+  @property({ attribute: 'without-arrow', type: Boolean, reflect: true }) withoutArrow = false;
+
   @property() for: string | null = null;
 
   @state() anchor: null | Element = null;
@@ -332,7 +335,7 @@ export default class WaTooltip extends WebAwesomeElement {
         skidding=${this.skidding}
         flip
         shift
-        arrow
+        ?arrow=${!this.withoutArrow}
         hover-bridge
         .anchor=${this.anchor}
       >