fix(tooltip): keep tooltip content visible as user hovers

projects/angular/clarity.api.md

@@ -4379,7 +4379,8 @@ export class ClrTooltip {
 // @public (undocumented)
 export class ClrTooltipContent extends AbstractPopover implements OnInit {
     // Warning: (ae-forgotten-export) The symbol "TooltipIdService" needs to be exported by the entry point index.d.ts
-    constructor(injector: Injector, parentHost: ElementRef, tooltipIdService: TooltipIdService);
+    // Warning: (ae-forgotten-export) The symbol "TooltipMouseService" needs to be exported by the entry point index.d.ts
+    constructor(injector: Injector, parentHost: ElementRef, tooltipIdService: TooltipIdService, tooltipMouseService: TooltipMouseService);
     // (undocumented)
     get id(): string;
     set id(value: string);
@@ -4394,7 +4395,7 @@ export class ClrTooltipContent extends AbstractPopover implements OnInit {
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrTooltipContent, "clr-tooltip-content", never, { "id": "id"; "position": "clrPosition"; "size": "clrSize"; }, {}, never, ["*"]>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrTooltipContent, [null, { optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrTooltipContent, [null, { optional: true; }, null, null]>;
 }
 
 // @public (undocumented)
@@ -4413,7 +4414,7 @@ export class ClrTooltipModule {
 
 // @public (undocumented)
 export class ClrTooltipTrigger {
-    constructor(toggleService: ClrPopoverToggleService, tooltipIdService: TooltipIdService);
+    constructor(toggleService: ClrPopoverToggleService, tooltipIdService: TooltipIdService, tooltipMouseService: TooltipMouseService);
     // (undocumented)
     ariaDescribedBy: string;
     // (undocumented)

projects/angular/src/popover/tooltip/_tooltips.clarity.scss

@@ -110,6 +110,15 @@
       transition: opacity 0.3s linear;
       white-space: normal;
       z-index: map-get($clr-layers, tooltips);
+
+      &::after {
+        position: absolute;
+        top: -20px;
+        left: -20px;
+        right: -20px;
+        bottom: -20px;
+        content: '';
+      }
     }
 
     &:hover > .tooltip-content,

projects/angular/src/popover/tooltip/all.spec.ts

@@ -5,12 +5,14 @@
  */
 
 import TooltipIdServiceSpecs from './providers/tooltip-id.service.spec';
+import TooltipMouseServiceSpecs from './providers/tooltip-mouse.service.spec';
 import TooltipContentSpecs from './tooltip-content.spec';
 import TooltipTriggerSpecs from './tooltip-trigger.spec';
 import TooltipSpecs from './tooltip.spec';
 
 describe('Tooltip', () => {
   TooltipIdServiceSpecs();
+  TooltipMouseServiceSpecs();
   TooltipContentSpecs();
   TooltipTriggerSpecs();
   TooltipSpecs();

projects/angular/src/popover/tooltip/providers/tooltip-mouse.service.spec.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { fakeAsync, tick } from '@angular/core/testing';
+
+import { ClrPopoverToggleService } from '../../../utils/popover/providers/popover-toggle.service';
+import { TooltipMouseService } from './tooltip-mouse.service';
+
+export default function (): void {
+  describe('Tooltip Mouse Service', () => {
+    let toggleService: ClrPopoverToggleService;
+    let mouseService: TooltipMouseService;
+
+    beforeEach(() => {
+      toggleService = new ClrPopoverToggleService();
+      mouseService = new TooltipMouseService(toggleService);
+    });
+
+    it('should show the tooltip when the mouse enters the trigger', () => {
+      mouseService.onMouseEnterTrigger();
+
+      expect(toggleService.open).toBe(true);
+    });
+
+    it('should hide the tooltip if the mouse leaves the trigger and does not enter the content', fakeAsync(() => {
+      toggleService.open = true;
+
+      mouseService.onMouseLeaveTrigger();
+      tick();
+
+      expect(toggleService.open).toBe(false);
+    }));
+
+    it('should hide the tooltip if the mouse leaves the content and does not enter the trigger', fakeAsync(() => {
+      toggleService.open = true;
+
+      mouseService.onMouseLeaveContent();
+      tick();
+
+      expect(toggleService.open).toBe(false);
+    }));
+
+    it('should not hide the tooltip as the mouse moves from the trigger to the content', fakeAsync(() => {
+      toggleService.open = true;
+
+      mouseService.onMouseLeaveTrigger();
+      mouseService.onMouseEnterContent();
+      tick();
+
+      expect(toggleService.open).toBe(true);
+    }));
+  });
+}

projects/angular/src/popover/tooltip/providers/tooltip-mouse.service.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { Injectable } from '@angular/core';
+
+import { ClrPopoverToggleService } from '../../../utils/popover/providers/popover-toggle.service';
+
+@Injectable()
+export class TooltipMouseService {
+  private mouseOverTrigger: boolean;
+  private mouseOverContent: boolean;
+
+  constructor(private readonly toggleService: ClrPopoverToggleService) {}
+
+  onMouseEnterTrigger() {
+    this.mouseOverTrigger = true;
+    this.toggleService.open = true;
+  }
+
+  onMouseLeaveTrigger() {
+    this.mouseOverTrigger = false;
+    this.hideIfMouseOut();
+  }
+
+  onMouseEnterContent() {
+    this.mouseOverContent = true;
+  }
+
+  onMouseLeaveContent() {
+    this.mouseOverContent = false;
+    this.hideIfMouseOut();
+  }
+
+  private hideIfMouseOut() {
+    // A zero timeout is used so that the code has a chance to update
+    // the `mouseOverContent` property after the user moves the mouse from the trigger to the content.
+    setTimeout(() => {
+      if (!this.mouseOverTrigger && !this.mouseOverContent) {
+        this.toggleService.open = false;
+      }
+    }, 0);
+  }
+}

projects/angular/src/popover/tooltip/tooltip-content.ts

@@ -4,14 +4,15 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, ElementRef, Inject, Injector, Input, OnInit, Optional } from '@angular/core';
+import { Component, ElementRef, HostListener, Inject, Injector, Input, OnInit, Optional } from '@angular/core';
 
 import { assertNever } from '../../utils/assert/assert.helpers';
 import { uniqueIdFactory } from '../../utils/id-generator/id-generator.service';
 import { AbstractPopover } from '../common/abstract-popover';
 import { Point } from '../common/popover';
 import { POPOVER_HOST_ANCHOR } from '../common/popover-host-anchor.token';
 import { TooltipIdService } from './providers/tooltip-id.service';
+import { TooltipMouseService } from './providers/tooltip-mouse.service';
 
 const POSITIONS = ['bottom-left', 'bottom-right', 'top-left', 'top-right', 'right', 'left'] as const;
 type Position = typeof POSITIONS[number];
@@ -37,7 +38,8 @@ export class ClrTooltipContent extends AbstractPopover implements OnInit {
     @Optional()
     @Inject(POPOVER_HOST_ANCHOR)
     parentHost: ElementRef,
-    private tooltipIdService: TooltipIdService
+    private tooltipIdService: TooltipIdService,
+    private tooltipMouseService: TooltipMouseService
   ) {
     super(injector, parentHost);
 
@@ -127,6 +129,16 @@ export class ClrTooltipContent extends AbstractPopover implements OnInit {
     this.position = this.position || defaultPosition;
   }
 
+  @HostListener('mouseenter')
+  private onMouseEnter() {
+    this.tooltipMouseService.onMouseEnterContent();
+  }
+
+  @HostListener('mouseleave')
+  private onMouseLeave() {
+    this.tooltipMouseService.onMouseLeaveContent();
+  }
+
   private updateCssClass({ oldClass, newClass }: { oldClass: string; newClass: string }) {
     this.renderer.removeClass(this.el.nativeElement, oldClass);
     this.renderer.addClass(this.el.nativeElement, newClass);

projects/angular/src/popover/tooltip/tooltip-trigger.spec.ts

@@ -9,6 +9,7 @@ import { Component } from '@angular/core';
 import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
 import { spec, TestContext } from '../../utils/testing/helpers.spec';
 import { TooltipIdService } from './providers/tooltip-id.service';
+import { TooltipMouseService } from './providers/tooltip-mouse.service';
 import { ClrTooltipTrigger } from './tooltip-trigger';
 import { ClrTooltipModule } from './tooltip.module';
 
@@ -27,7 +28,7 @@ interface TooltipContext extends TestContext<ClrTooltipTrigger, SimpleTest> {
 export default function (): void {
   describe('TooltipTrigger component', function (this: TooltipContext) {
     spec(ClrTooltipTrigger, SimpleTest, ClrTooltipModule, {
-      providers: [ClrPopoverToggleService, TooltipIdService],
+      providers: [ClrPopoverToggleService, TooltipIdService, TooltipMouseService],
     });
 
     beforeEach(function () {

projects/angular/src/popover/tooltip/tooltip-trigger.ts

@@ -9,6 +9,7 @@ import { Subscription } from 'rxjs';
 
 import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
 import { TooltipIdService } from './providers/tooltip-id.service';
+import { TooltipMouseService } from './providers/tooltip-mouse.service';
 
 @Directive({
   selector: '[clrTooltipTrigger]',
@@ -23,7 +24,11 @@ export class ClrTooltipTrigger {
   ariaDescribedBy: string;
   private subs: Subscription[] = [];
 
-  constructor(private toggleService: ClrPopoverToggleService, private tooltipIdService: TooltipIdService) {
+  constructor(
+    private toggleService: ClrPopoverToggleService,
+    private tooltipIdService: TooltipIdService,
+    private tooltipMouseService: TooltipMouseService
+  ) {
     // The aria-described by comes from the id of content. It
     this.subs.push(this.tooltipIdService.id.subscribe(tooltipId => (this.ariaDescribedBy = tooltipId)));
   }
@@ -32,15 +37,23 @@ export class ClrTooltipTrigger {
     this.subs.forEach(sub => sub.unsubscribe());
   }
 
-  @HostListener('mouseenter')
   @HostListener('focus')
   showTooltip(): void {
     this.toggleService.open = true;
   }
 
-  @HostListener('mouseleave')
   @HostListener('blur')
   hideTooltip(): void {
     this.toggleService.open = false;
   }
+
+  @HostListener('mouseenter')
+  private onMouseEnter() {
+    this.tooltipMouseService.onMouseEnterTrigger();
+  }
+
+  @HostListener('mouseleave')
+  private onMouseLeave() {
+    this.tooltipMouseService.onMouseLeaveTrigger();
+  }
 }

projects/angular/src/popover/tooltip/tooltip.ts

@@ -9,13 +9,19 @@ import { Component, ElementRef } from '@angular/core';
 import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
 import { POPOVER_HOST_ANCHOR } from '../common/popover-host-anchor.token';
 import { TooltipIdService } from './providers/tooltip-id.service';
+import { TooltipMouseService } from './providers/tooltip-mouse.service';
 
 @Component({
   selector: 'clr-tooltip',
   template: `<ng-content></ng-content>`,
   host: {
     '[class.tooltip]': 'true',
   },
-  providers: [ClrPopoverToggleService, { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }, TooltipIdService],
+  providers: [
+    ClrPopoverToggleService,
+    { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef },
+    TooltipIdService,
+    TooltipMouseService,
+  ],
 })
 export class ClrTooltip {}