feat: Tooltip arrow offset for different placements and RTL mode

Author: rkaraivanov

src/components/popover/popover.ts

@@ -83,6 +83,10 @@ export default class IgcPopoverComponent extends LitElement {
   @property({ attribute: false })
   public arrow: HTMLElement | null = null;
 
+  /** Additional offset to apply to the arrow element if enabled. */
+  @property({ type: Number, attribute: 'arrow-offset' })
+  public arrowOffset = 0;
+
   /**
    * Improves positioning for inline reference elements that span over multiple lines.
    * Useful for tooltips or similar components.
@@ -152,6 +156,7 @@ export default class IgcPopoverComponent extends LitElement {
   }
 
   @watch('arrow', { waitUntilFirstUpdate: true })
+  @watch('arrowOffset', { waitUntilFirstUpdate: true })
   @watch('flip', { waitUntilFirstUpdate: true })
   @watch('inline', { waitUntilFirstUpdate: true })
   @watch('offset', { waitUntilFirstUpdate: true })
@@ -305,8 +310,8 @@ export default class IgcPopoverComponent extends LitElement {
     this.arrow.part = currentPlacement;
 
     Object.assign(this.arrow.style, {
-      left: x != null ? `${roundByDPR(x)}px` : '',
-      top: y != null ? `${roundByDPR(y)}px` : '',
+      left: x != null ? `${roundByDPR(x + this.arrowOffset)}px` : '',
+      top: y != null ? `${roundByDPR(y + this.arrowOffset)}px` : '',
       [staticSide]: '-4px',
     });
   }

src/components/tooltip/tooltip.ts

@@ -10,7 +10,7 @@ import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { asNumber } from '../common/util.js';
+import { asNumber, isLTR } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcPopoverComponent, {
   type PopoverPlacement,
@@ -90,6 +90,32 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
   @query('#arrow')
   private _arrowElement!: HTMLElement;
 
+  private get _arrowOffset() {
+    if (/-/.test(this.placement)) {
+      // Horizontal start | end placement
+
+      if (/^(left|right)-start$/.test(this.placement)) {
+        return -8;
+      }
+
+      if (/^(left|right)-end$/.test(this.placement)) {
+        return 8;
+      }
+
+      // Vertical start | end placement
+
+      if (/start$/.test(this.placement)) {
+        return isLTR(this) ? -8 : 8;
+      }
+
+      if (/end$/.test(this.placement)) {
+        return isLTR(this) ? 8 : -8;
+      }
+    }
+
+    return 0;
+  }
+
   /**
    * Whether the tooltip is showing.
    *
@@ -391,6 +417,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
         .offset=${this.offset}
         .anchor=${this._controller.anchor ?? undefined}
         .arrow=${this.disableArrow ? null : this._arrowElement}
+        .arrowOffset=${this._arrowOffset}
         .shiftPadding=${8}
         ?open=${this.open}
         ?inline=${this.inline}