feat(tooltip): add show/hide triggers

Author: RivaIvanova

projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts

@@ -1,9 +1,10 @@
 import {
-    Directive, OnInit, OnDestroy, Output, ElementRef, Optional, ViewContainerRef, HostListener,
+    Directive, OnInit, OnDestroy, Output, ElementRef, ViewContainerRef,
     Input, EventEmitter, booleanAttribute, TemplateRef, ComponentRef, Renderer2,
     EnvironmentInjector,
     createComponent,
     AfterViewInit,
+    inject,
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -14,7 +15,7 @@ import { IgxToggleActionDirective } from '../toggle/toggle.directive';
 import { IgxTooltipComponent } from './tooltip.component';
 import { IgxTooltipDirective } from './tooltip.directive';
 import { IgxTooltipCloseButtonComponent } from './tooltip-close-button.component';
-import { TooltipPositionSettings, TooltipPositionStrategy } from './tooltip.common';
+import { parseTriggers, TooltipPositionSettings, TooltipPositionStrategy } from './tooltip.common';
 
 export interface ITooltipShowEventArgs extends IBaseEventArgs {
     target: IgxTooltipTargetDirective;
@@ -232,6 +233,46 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     @Input({ transform: booleanAttribute })
     public tooltipDisabled = false;
 
+    /**
+     * Which event triggers will show the tooltip.
+     * Expects a comma separate string of different event triggers.
+     * Defaults to `pointerenter`.
+     * ```html
+     * <igx-icon [igxTooltipTarget]="tooltipRef" [showTriggers]="'click,focus'">info</igx-icon>
+     * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
+     * ```
+     */
+    @Input()
+    public get showTriggers(): string {
+        return Array.from(this._showTriggers).join();
+    }
+
+    public set showTriggers(value: string) {
+        this._showTriggers = parseTriggers(value);
+        this.removeEventListeners();
+        this.addEventListeners();
+    }
+
+    /**
+     * Which event triggers will hide the tooltip.
+     * Expects a comma separate string of different event triggers.
+     * Defaults to `pointerleave` and `click`.
+     * ```html
+     * <igx-icon [igxTooltipTarget]="tooltipRef" [hideTriggers]="'keypress,blur'">info</igx-icon>
+     * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
+     * ```
+     */
+    @Input()
+    public get hideTriggers(): string {
+        return Array.from(this._hideTriggers).join();
+    }
+
+    public set hideTriggers(value: string) {
+        this._hideTriggers = parseTriggers(value);
+        this.removeEventListeners();
+        this.addEventListeners();
+    }
+
     /**
      * @hidden
      */
@@ -253,8 +294,11 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     }
 
     /**
-    * @hidden
-    */
+     * Specifies a plain text as tooltip content.
+     * ```html
+     * <igx-icon igxTooltipTarget [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
+     * ```
+     */
     @Input()
     public set tooltip(content: any) {
         if (!this.target && (typeof content === 'string' || content instanceof String)) {
@@ -323,6 +367,12 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     @Output()
     public tooltipHide = new EventEmitter<ITooltipHideEventArgs>();
 
+    private _element = inject(ElementRef);
+    private _navigationService = inject(IgxNavigationService, { optional: true });
+    private _viewContainerRef = inject(ViewContainerRef);
+    private _renderer = inject(Renderer2);
+    private _envInjector = inject(EnvironmentInjector);
+
     private _destroy$ = new Subject<void>();
     private _autoHideDelay = 180;
     private _isForceClosed = false;
@@ -331,25 +381,20 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     private _closeTemplate: TemplateRef<any>;
     private _sticky = false;
     private _positionSettings: PositionSettings = TooltipPositionSettings;
+    private _showTriggers = new Set(['pointerenter']);
+    private _hideTriggers = new Set(['pointerleave', 'click']);
 
-    constructor(
-        private _element: ElementRef,
-        @Optional() private _navigationService: IgxNavigationService,
-        private _viewContainerRef: ViewContainerRef,
-        private _renderer: Renderer2,
-        private _envInjector: EnvironmentInjector
-    ) {
-        super(_element, _navigationService);
-    }
+    private _abortController = new AbortController();
 
     /**
      * @hidden
      */
-    @HostListener('click')
     public override onClick() {
-        if (!this.target.collapsed) {
-            this._hideOnInteraction();
-        } else if (this.target.timeoutId) {
+        if (
+            this.target.timeoutId &&
+            this.target.collapsed &&
+            !this._showTriggers.has('click')
+        ) {
             clearTimeout(this.target.timeoutId);
             this.target.timeoutId = null;
         }
@@ -358,16 +403,14 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     /**
      * @hidden
      */
-    @HostListener('mouseenter')
-    public onMouseEnter() {
+    public onShow(): void {
         this._checksBeforeShowing(() => this._showOnInteraction());
     }
 
     /**
      * @hidden
      */
-    @HostListener('mouseleave')
-    public onMouseLeave() {
+    public onHide() : void {
         if (this.tooltipDisabled) {
             return;
         }
@@ -376,28 +419,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this._hideOnInteraction();
     }
 
-    /**
-     * @hidden
-     */
-    public onTouchStart() {
-        this._checksBeforeShowing(() => this._showOnInteraction());
-    }
-
-    /**
-     * @hidden
-     */
-    public onDocumentTouchStart(event) {
-        if (this.tooltipDisabled || this?.target?.tooltipTarget !== this) {
-            return;
-        }
-
-        if (this.nativeElement !== event.target &&
-            !this.nativeElement.contains(event.target)
-        ) {
-            this._hideOnInteraction();
-        }
-    }
-
     /**
      * @hidden
      */
@@ -421,7 +442,8 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             }
         });
 
-        this.nativeElement.addEventListener('touchstart', this.onTouchStart = this.onTouchStart.bind(this), { passive: true });
+        this.removeEventListeners();
+        this.addEventListeners();
     }
 
     /**
@@ -438,7 +460,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      */
     public ngOnDestroy() {
         this.hideTooltip();
-        this.nativeElement.removeEventListener('touchstart', this.onTouchStart);
+        this.removeEventListeners();
         this._destroyCloseButton();
         this._destroy$.next();
         this._destroy$.complete();
@@ -470,6 +492,24 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         return Object.assign({}, this._overlayDefaults, this.overlaySettings);
     }
 
+    private addEventListeners(): void {
+        const options = { passive: true, signal: this._abortController.signal };
+
+        this.onShow = this.onShow.bind(this);
+        for (const each of this._showTriggers) {
+            this.nativeElement.addEventListener(each, this.onShow, options);
+        }
+        this.onHide = this.onHide.bind(this);
+        for (const each of this._hideTriggers) {
+            this.nativeElement.addEventListener(each, this.onHide, options);
+        }
+    }
+
+    private removeEventListeners(): void {
+      this._abortController.abort();
+      this._abortController = new AbortController();
+    }
+
     private _checkOutletAndOutsideClick(): void {
         if (this.outlet) {
             this._overlayDefaults.outlet = this.outlet;

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.common.ts

@@ -5,6 +5,9 @@ import { useAnimation } from '@angular/animations';
 import { fadeOut, scaleInCenter } from 'igniteui-angular/animations';
 
 export const TooltipRegexes = Object.freeze({
+    /** Used for parsing the strings passed in the tooltip `show/hide-trigger` properties. */
+    triggers: /[,\s]+/,
+
     /** Matches horizontal `Placement` end positions. `left-end` | `right-end` */
     horizontalEnd: /^(left|right)-end$/,
 
@@ -330,3 +333,9 @@ export const PositionsMap = new Map<Placement, PositionSettings>([
         verticalStartPoint: VerticalAlignment.Bottom,
     }]
 ]);
+
+export function parseTriggers(triggers: string): Set<string> {
+    return new Set(
+        (triggers ?? '').split(TooltipRegexes.triggers).filter((s) => s.trim())
+    );
+}

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts

@@ -1,15 +1,12 @@
 import {
-    Directive, ElementRef, Input, ChangeDetectorRef, Optional, HostBinding, Inject,
-    OnDestroy, inject, DOCUMENT, HostListener,
+    Directive, Input, HostBinding,
+    OnDestroy, inject, HostListener,
     Renderer2,
     AfterViewInit,
 } from '@angular/core';
-import { IgxOverlayService } from '../../services/overlay/overlay';
 import { OverlaySettings } from '../../services/overlay/utilities';
-import { IgxNavigationService } from '../../core/navigation';
 import { IgxToggleDirective } from '../toggle/toggle.directive';
 import { IgxTooltipTargetDirective } from './tooltip-target.directive';
-import { Subject, takeUntil } from 'rxjs';
 import { PlatformUtil } from '../../core/utils';
 
 let NEXT_ID = 0;
@@ -118,29 +115,9 @@ export class IgxTooltipDirective extends IgxToggleDirective implements AfterView
 
     private _arrowEl: HTMLElement;
     private _role: 'tooltip' | 'status' = 'tooltip';
-    private _destroy$ = new Subject<boolean>();
-    private _document = inject(DOCUMENT);
     private _renderer = inject(Renderer2);
     private _platformUtil = inject(PlatformUtil);
 
-    /** @hidden */
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        @Inject(IgxOverlayService) overlayService: IgxOverlayService,
-        @Optional() navigationService: IgxNavigationService) {
-        // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
-        super(elementRef, cdr, overlayService, navigationService);
-
-        this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
-        this.opening.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this._document.addEventListener('touchstart', this.onDocumentTouchStart, { passive: true });
-        });
-        this.closed.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this._document.removeEventListener('touchstart', this.onDocumentTouchStart);
-        });
-    }
-
     /** @hidden */
     public ngAfterViewInit(): void {
         if (this._platformUtil.isBrowser) {
@@ -152,10 +129,6 @@ export class IgxTooltipDirective extends IgxToggleDirective implements AfterView
     public override ngOnDestroy() {
         super.ngOnDestroy();
 
-        this._document.removeEventListener('touchstart', this.onDocumentTouchStart);
-        this._destroy$.next(true);
-        this._destroy$.complete();
-
         if (this.arrow) {
             this._removeArrow();
         }
@@ -164,17 +137,21 @@ export class IgxTooltipDirective extends IgxToggleDirective implements AfterView
     /**
      * @hidden
      */
-    @HostListener('mouseenter')
-    public onMouseEnter() {
-        this.tooltipTarget?.onMouseEnter();
+    @HostListener('pointerenter')
+    protected onPointerEnter() {
+        if (this.tooltipTarget) {
+            this.tooltipTarget.onShow();
+        }
     }
 
     /**
      * @hidden
      */
-    @HostListener('mouseleave')
-    public onMouseLeave() {
-        this.tooltipTarget?.onMouseLeave();
+    @HostListener('pointerleave')
+    protected onPointerLeave() {
+        if (this.tooltipTarget) {
+            this.tooltipTarget.onHide();
+        }
     }
 
     /**
@@ -230,8 +207,4 @@ export class IgxTooltipDirective extends IgxToggleDirective implements AfterView
         this._arrowEl.remove();
         this._arrowEl = null;
     }
-
-    private onDocumentTouchStart(event) {
-        this.tooltipTarget?.onDocumentTouchStart(event);
-    }
 }