fix(tooltip): add IntersectionObserver to remove tooltip when host element is not visible

Author: xidedix

projects/coreui-angular/src/lib/popover/popover.directive.spec.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectorRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
-import { ListenersService } from '../services/listeners.service';
+import { IntersectionService, ListenersService } from '../services';
 import { PopoverDirective } from './popover.directive';
-import { IntersectionService } from '../services';
 
 describe('PopoverDirective', () => {
   let document: Document;

projects/coreui-angular/src/lib/services/intersection.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
-interface IIntersectionObserverInit {
+export interface IIntersectionObserverInit {
   root?: Element | null;
   rootMargin?: string;
   threshold?: number | number[];
@@ -26,7 +26,7 @@ export class IntersectionService implements OnDestroy {
 
   createIntersectionObserver(hostElement: { nativeElement: Element; }, observerOptions = this.defaultObserverOptions) {
 
-    const options = { ...this.defaultObserverOptions, ...observerOptions }
+    const options = { ...this.defaultObserverOptions, ...observerOptions };
 
     this.hostElement = hostElement;
 

projects/coreui-angular/src/lib/services/public_api.ts

@@ -1,2 +1,3 @@
-export { IntersectionService } from './intersection.service';
+export { IntersectionService, IIntersectionObserverInit } from './intersection.service';
+export { ListenersService, IListenersConfig } from './listeners.service';
 export { ClassToggleService } from './class-toggle.service';

projects/coreui-angular/src/lib/tooltip/tooltip.directive.spec.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
-import { ListenersService } from '../services/listeners.service';
+import { IntersectionService, ListenersService } from '../services';
 import { TooltipDirective } from './tooltip.directive';
 
 describe('TooltipDirective', () => {
@@ -11,7 +11,16 @@ describe('TooltipDirective', () => {
 
   it('should create an instance', () => {
     const listenersService = new ListenersService(renderer);
-    const directive = new TooltipDirective(document, renderer, hostElement, viewContainerRef, listenersService, changeDetectorRef);
+    const intersectionService = new IntersectionService();
+    const directive = new TooltipDirective(
+      document,
+      renderer,
+      hostElement,
+      viewContainerRef,
+      listenersService,
+      changeDetectorRef,
+      intersectionService
+    );
     expect(directive).toBeTruthy();
   });
 });

projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   ComponentRef,
   Directive,
@@ -15,19 +16,22 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { createPopper, Instance, Options } from '@popperjs/core';
 
 import { Triggers } from '../coreui.types';
 import { TooltipComponent } from './tooltip/tooltip.component';
 import { IListenersConfig, ListenersService } from '../services/listeners.service';
+import { IntersectionService } from '../services';
 
 @Directive({
   selector: '[cTooltip]',
   exportAs: 'cTooltip',
-  providers: [ListenersService],
+  providers: [ListenersService, IntersectionService],
   standalone: true
 })
-export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
+export class TooltipDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {
 
   /**
    * Content of tooltip
@@ -92,15 +96,23 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
     ]
   };
 
+  private intersectingSubscription?: Subscription;
+
   constructor(
     @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
     private hostElement: ElementRef,
     private viewContainerRef: ViewContainerRef,
     private listenersService: ListenersService,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private intersectionService: IntersectionService
   ) {}
 
+  ngAfterViewInit(): void {
+    this.intersectionService.createIntersectionObserver(this.hostElement);
+    this.intersectionServiceSubscribe();
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['visible']) {
       changes['visible'].currentValue ? this.addTooltipElement() : this.removeTooltipElement();
@@ -110,6 +122,7 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
   ngOnDestroy(): void {
     this.clearListeners();
     this.destroyTooltipElement();
+    this.intersectionServiceSubscribe(false);
   }
 
   ngOnInit(): void {
@@ -140,6 +153,21 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
     this.listenersService.clearListeners();
   }
 
+  private intersectionServiceSubscribe(subscribe: boolean = true): void {
+    if (subscribe) {
+      this.intersectingSubscription = this.intersectionService.intersecting$
+        .pipe(
+          debounceTime(100)
+        )
+        .subscribe(isIntersecting => {
+          this.visible = isIntersecting ? this.visible : false;
+          !this.visible && this.removeTooltipElement();
+        });
+    } else {
+      this.intersectingSubscription?.unsubscribe();
+    }
+  }
+
   private getUID(prefix: string): string {
     let uid = prefix ?? 'random-id';
     do {