feat(tooltip): adjust arrow position

RivaIvanova · RivaIvanova · commit b7ed9152b814 · 2025-05-21T18:13:52.000+03:00
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts
@@ -1,18 +1,20 @@
 import { useAnimation } from '@angular/animations';
-import { Directive, OnInit, OnDestroy, Output, ElementRef, Optional, ViewContainerRef, HostListener, Input, EventEmitter, booleanAttribute, TemplateRef, ComponentRef, Renderer2, AfterViewInit } from '@angular/core';
+import {
+    Directive, OnInit, OnDestroy, Output, ElementRef, Optional, ViewContainerRef, HostListener,
+    Input, EventEmitter, booleanAttribute, TemplateRef, ComponentRef, Renderer2, OnChanges, SimpleChanges,
+} from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IgxNavigationService } from '../../core/navigation';
 import { IBaseEventArgs } from '../../core/utils';
-import { PositionSettings } from '../../services/public_api';
+import {  PositionSettings } from '../../services/public_api';
 import { IgxToggleActionDirective } from '../toggle/toggle.directive';
 import { IgxTooltipComponent } from './tooltip.component';
 import { IgxTooltipDirective } from './tooltip.directive';
 import { IgxTooltipCloseButtonComponent } from './tooltip-close-button.component';
 import { fadeOut, scaleInCenter } from 'igniteui-angular/animations';
 import { TooltipPlacement } from './enums';
-import { IgxTooltipPositionStrategy, PositionsMap, TooltipRegexes } from './tooltip.common';
-import { IgxDirectionality } from '../../services/direction/directionality';
+import { TooltipPositionStrategy, PositionsMap } from './tooltip.common';
 
 export interface ITooltipShowEventArgs extends IBaseEventArgs {
     target: IgxTooltipTargetDirective;
@@ -44,12 +46,7 @@ export interface ITooltipHideEventArgs extends IBaseEventArgs {
     selector: '[igxTooltipTarget]',
     standalone: true
 })
-export class IgxTooltipTargetDirective extends IgxToggleActionDirective implements OnInit, AfterViewInit, OnDestroy {
-
-    private _closeButtonRef?: ComponentRef<IgxTooltipCloseButtonComponent>;
-    private _closeTemplate: TemplateRef<any>;
-    private _sticky = false;
-
+export class IgxTooltipTargetDirective extends IgxToggleActionDirective implements OnChanges, OnInit, OnDestroy {
     /**
      * Gets/sets the amount of milliseconds that should pass before showing the tooltip.
      *
@@ -97,8 +94,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this._placement = value;
 
         if (this._overlayDefaults && this.target) {
-            this._overlayDefaults.positionStrategy = new IgxTooltipPositionStrategy(this._positionsSettingsByPlacement, value, this.offset);
-            this.target.positionArrow(value, this._arrowOffset);
+            this._overlayDefaults.positionStrategy = new TooltipPositionStrategy(this._positionsSettingsByPlacement, this);
         }
     }
 
@@ -108,7 +104,17 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
 
     /** The offset of the tooltip from the target in pixels. Default value is 6. */
     @Input()
-    public offset = 6;
+    public set offset(value: number) {
+        this._offset = value;
+
+        if (this._overlayDefaults && this.target) {
+            this._overlayDefaults.positionStrategy = new TooltipPositionStrategy(this._positionsSettingsByPlacement, this);
+        }
+    }
+
+    public get offset(): number {
+        return this._offset;
+    }
 
     /**
      * Controls whether the arrow element of the tooltip is rendered.
@@ -131,11 +137,14 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      */
     @Input()
     public set disableArrow(value: boolean) {
-        this.target.disableArrow = value;
+        if (this.target) {
+            this.target.arrow.style.display = value ? 'none' : '';
+        }
+        this._disableArrow = value;
     }
 
     public get disableArrow(): boolean {
-        return this.target.disableArrow;
+        return this._disableArrow;
     }
 
     /**
@@ -314,14 +323,18 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     private _destroy$ = new Subject<void>();
     private _autoHideDelay = 180;
     private _isForceClosed = false;
+    private _disableArrow = false;
+    private _offset = 6;
     private _placement: TooltipPlacement = TooltipPlacement.top;
+    private _closeButtonRef?: ComponentRef<IgxTooltipCloseButtonComponent>;
+    private _closeTemplate: TemplateRef<any>;
+    private _sticky = false;
 
     constructor(
         private _element: ElementRef,
         @Optional() private _navigationService: IgxNavigationService,
         private _viewContainerRef: ViewContainerRef,
         private _renderer: Renderer2,
-        private _dir: IgxDirectionality,
     ) {
         super(_element, _navigationService);
     }
@@ -395,13 +408,23 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         }
     }
 
+
+    /**
+     * @hidden
+     */
+    public ngOnChanges(changes: SimpleChanges): void {
+        if (changes['disableArrow']) {
+            this.target.arrow.style.display = changes['disableArrow'].currentValue ? 'none' : '';
+        }
+    }
+
     /**
      * @hidden
      */
     public override ngOnInit() {
         super.ngOnInit();
 
-        this._overlayDefaults.positionStrategy = new IgxTooltipPositionStrategy(this._positionsSettingsByPlacement, this.placement, this.offset);
+        this._overlayDefaults.positionStrategy = new TooltipPositionStrategy(this._positionsSettingsByPlacement, this);
         this._overlayDefaults.closeOnOutsideClick = false;
         this._overlayDefaults.closeOnEscape = true;
 
@@ -418,13 +441,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this.target.onHide = this._hideOnInteraction.bind(this);
     }
 
-    /**
-     * @hidden
-     */
-    public ngAfterViewInit() {
-        this.target.positionArrow(this.placement, this._arrowOffset);
-    }
-
     /**
      * @hidden
      */
@@ -468,27 +484,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         return Object.assign({}, animations, positions);
     }
 
-    private get _arrowOffset(): number {
-        if (this.placement.includes('-')) {
-            // Horizontal start | end placement
-            if (TooltipRegexes.horizontalStart.test(this.placement)) {
-                return -8;
-            }
-            if (TooltipRegexes.horizontalEnd.test(this.placement)) {
-                return 8;
-            }
-
-            // Vertical start | end placement
-            if (TooltipRegexes.start.test(this.placement)) {
-                return this._dir.rtl ? 8 : -8;
-            }
-            if (TooltipRegexes.end.test(this.placement)) {
-                return this._dir.rtl ? -8 : 8;
-            }
-        }
-        return 0;
-    }
-
     private _checkOutletAndOutsideClick(): void {
         if (this.outlet) {
             this._overlayDefaults.outlet = this.outlet;
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.common.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.common.ts
@@ -1,19 +1,27 @@
 import { AutoPositionStrategy } from '../../services/overlay/position/auto-position-strategy';
-import { ConnectedFit, HorizontalAlignment, PositionSettings, VerticalAlignment } from '../../services/overlay/utilities';
+import { ConnectedFit, HorizontalAlignment, Point, PositionSettings, Size, VerticalAlignment } from '../../services/overlay/utilities';
+import { IgxTooltipTargetDirective } from './tooltip-target.directive';
 import { TooltipPlacement } from './enums';
+import { first } from '../../core/utils';
 
 export const TooltipRegexes = Object.freeze({
-  /** Matches horizontal `PopoverPlacement` start positions. */
-  horizontalStart: /^(left|right)-start$/,
+    /** Matches horizontal `TooltipPlacement` end positions. `left-end` | `right-end` */
+    horizontalEnd: /^(left|right)-end$/,
 
-  /** Matches horizontal `PopoverPlacement` end positions. */
-  horizontalEnd: /^(left|right)-end$/,
+    /** Matches vertical `TooltipPlacement` centered positions. `left` | `right` */
+    horizontalCenter:  /^(left|right)$/,
 
-  /** Matches vertical `PopoverPlacement` start positions. */
-  start: /start$/,
+    /**
+     * Matches vertical `TooltipPlacement` positions.
+     * `top` | `top-start` | `top-end` | `bottom` | `bottom-start` | `bottom-end`
+     */
+    vertical:  /^(top|bottom)(-(start|end))?$/,
 
-  /** Matches vertical `PopoverPlacement` end positions. */
-  end: /end$/,
+    /** Matches vertical `TooltipPlacement` end positions. `top-end` | `bottom-end` */
+    verticalEnd: /^(top|bottom)-end$/,
+
+    /** Matches vertical `TooltipPlacement` centered positions. `top` | `bottom` */
+    verticalCenter:  /^(top|bottom)$/,
 });
 
 export const PositionsMap = new Map<TooltipPlacement, PositionSettings>([
@@ -91,14 +99,68 @@ export const PositionsMap = new Map<TooltipPlacement, PositionSettings>([
     }]
 ]);
 
-export class IgxTooltipPositionStrategy extends AutoPositionStrategy {
+export class TooltipPositionStrategy extends AutoPositionStrategy {
+    private _placement: TooltipPlacement;
+    private _offSet: number;
+    private _arrow: HTMLElement;
+    private _tooltipSize: DOMRect;
 
     constructor(
         settings: PositionSettings,
-        private _placement: TooltipPlacement,
-        private _offSet: number
+        tooltipTarget: IgxTooltipTargetDirective
     ) {
         super(settings);
+
+        this._placement = tooltipTarget.placement;
+        this._offSet = tooltipTarget.offset;
+        this._arrow = tooltipTarget.target.arrow;
+    }
+
+    public override position(
+        contentElement: HTMLElement,
+        size: Size,
+        document?: Document,
+        initialCall?: boolean,
+        target?: Point | HTMLElement
+    ): void {
+        this._tooltipSize = contentElement.getBoundingClientRect();
+        this.positionArrow(this._arrow, this._placement);
+        super.position(contentElement, size, document, initialCall, target);
+    }
+
+    protected override fitInViewport(element: HTMLElement, connectedFit: ConnectedFit): void {
+        super.fitInViewport(element, connectedFit);
+
+        this._placement = this._getPlacementByPositionSettings(this.settings);
+        this.positionArrow(this._arrow, this._placement);
+    }
+
+    /**
+     * Sets the position of the arrow relative to the tooltip element.
+     *
+     * @param arrow the arrow element of the tooltip.
+     * @param placement the placement of the tooltip. Used to determine where the arrow should render.
+     */
+    protected positionArrow(arrow: HTMLElement, placement: TooltipPlacement) {
+        this._resetArrowPositionStyles(arrow);
+
+        const currentPlacement = first(placement.split('-'));
+
+        // The opposite side where the arrow element should render based on the `currentPlacement`
+        const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+        }[currentPlacement]!;
+
+        arrow.className = `igx-tooltip--${currentPlacement}`;
+
+        Object.assign(arrow.style, {
+            top: this._getArrowPositionStyles(placement, arrow, 'horizontal'),
+            left: this._getArrowPositionStyles(placement, arrow, 'vertical'),
+            [staticSide]: '-4px',
+        });
     }
 
     protected override setStyle(
@@ -141,4 +203,53 @@ export class IgxTooltipPositionStrategy extends AutoPositionStrategy {
 
         super.setStyle(element, targetRect, elementRect, connectedFit);
     }
+
+    private _resetArrowPositionStyles(arrow: HTMLElement): void {
+        arrow.style.top = '';
+        arrow.style.bottom = '';
+        arrow.style.left = '';
+        arrow.style.right = '';
+    }
+
+    private _getArrowPositionStyles(placement: TooltipPlacement, arrow: HTMLElement, direction: 'horizontal' | 'vertical') {
+        const arrowRects = arrow.getBoundingClientRect();
+
+        const arrowSize = TooltipRegexes.vertical.test(placement)
+            ? arrowRects.width
+            : arrowRects.height;
+
+        const tooltipSize = TooltipRegexes.vertical.test(placement)
+            ? this._tooltipSize.width
+            : this._tooltipSize.height;
+
+        const center = `${direction}Center`
+        const end = `${direction}End`
+
+        if (TooltipRegexes[center].test(placement)) {
+            const offset = tooltipSize / 2 - arrowSize / 2;
+            return `${Math.round(offset)}px`;
+        }
+        if (TooltipRegexes[end].test(placement)) {
+            const endOffset = TooltipRegexes.vertical.test(placement) ? 8 : 4;
+            const offset = tooltipSize - (endOffset + arrowSize);
+            return `${Math.round(offset)}px`;
+        }
+
+        return '';
+    }
+
+    private _getPlacementByPositionSettings(settings: PositionSettings): TooltipPlacement {
+        const { horizontalDirection, horizontalStartPoint, verticalDirection, verticalStartPoint }  = settings;
+
+        const mapArray = Array.from(PositionsMap.entries());
+        const placement = mapArray.find(
+            ([_, val]) =>
+                val.horizontalDirection === horizontalDirection &&
+                val.horizontalStartPoint === horizontalStartPoint &&
+                val.verticalDirection === verticalDirection &&
+                val.verticalStartPoint === verticalStartPoint
+        );
+
+        return placement ? placement[0] : undefined;
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts
