fix(tooltip): fix delay (#3463)

fixes #3038

Author: IlyaSurmay

demo/src/app/components/+tooltip/demos/delay/delay.html

@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-primary"
+        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." [delay]="500">
+  Tooltip with 0.5sec delay
+</button>
+

demo/src/app/components/+tooltip/demos/delay/delay.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-tooltip-delay',
+  templateUrl: './delay.html'
+})
+export class DemoTooltipDelayComponent {}

demo/src/app/components/+tooltip/demos/index.ts

@@ -10,6 +10,7 @@ import { DemoTooltipTriggersCustomComponent } from './triggers-custom/triggers-c
 import { DemoTooltipTriggersManualComponent } from './triggers-manual/triggers-manual';
 import { DemoTooltipDynamicHtmlComponent } from './dynamic-html/dynamic-html';
 import { DemoTooltipClassComponent } from './class/class';
+import { DemoTooltipDelayComponent } from './delay/delay';
 
 export const DEMO_COMPONENTS = [
   DemoTooltipBasicComponent,
@@ -23,5 +24,6 @@ export const DEMO_COMPONENTS = [
   DemoTooltipStylingLocalComponent,
   DemoTooltipTriggersCustomComponent,
   DemoTooltipTriggersManualComponent,
-  DemoTooltipClassComponent
+  DemoTooltipClassComponent,
+  DemoTooltipDelayComponent
 ];

demo/src/app/components/+tooltip/tooltip-section.list.ts

@@ -20,6 +20,7 @@ import {
   NgApiDocComponent,
   NgApiDocConfigComponent
 } from '../../docs/api-docs';
+import { DemoTooltipDelayComponent } from './demos/delay/delay';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -131,6 +132,13 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader?lang=typescript!./demos/class/class.ts'),
         html: require('!!raw-loader?lang=markup!./demos/class/class.html'),
         outlet: DemoTooltipClassComponent
+      },
+      {
+        title: 'Tooltip with delay',
+        anchor: 'tooltip-delay',
+        component: require('!!raw-loader?lang=typescript!./demos/delay/delay.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/delay/delay.html'),
+        outlet: DemoTooltipDelayComponent
       }
     ]
   },

demo/src/ng-api-doc.ts

@@ -142,6 +142,101 @@ export const ngdoc: any = {
       }
     ]
   },
+  "DateParsingConfig": {
+    "fileName": "src/bs-moment/create/parsing.types.ts",
+    "className": "DateParsingConfig",
+    "description": "",
+    "methods": [],
+    "properties": [
+      {
+        "name": "_a",
+        "type": "number[]",
+        "description": "<p>DateArray [year, month, date, .....] </p>\n"
+      },
+      {
+        "name": "_changeInProgress",
+        "type": "boolean",
+        "description": "<p>used in set offset </p>\n"
+      },
+      {
+        "name": "_d",
+        "type": "Date",
+        "description": "<p>date value </p>\n"
+      },
+      {
+        "name": "_f",
+        "type": "string | string[]",
+        "description": "<p>date format </p>\n"
+      },
+      {
+        "name": "_i",
+        "type": "DateInput",
+        "description": "<p>input to parse: could be string, number[], number, Date, object </p>\n"
+      },
+      {
+        "name": "_isPm",
+        "type": "boolean",
+        "description": "<p>is PM </p>\n"
+      },
+      {
+        "name": "_isValid",
+        "type": "boolean",
+        "description": "<p>is valid </p>\n"
+      },
+      {
+        "name": "_l",
+        "type": "string",
+        "description": "<p>locale key, &#39;en&#39; by default </p>\n"
+      },
+      {
+        "name": "_locale",
+        "type": "Locale",
+        "description": "<p>date locale obj </p>\n"
+      },
+      {
+        "name": "_meridiem",
+        "type": "string",
+        "description": "<p>date meridiem </p>\n"
+      },
+      {
+        "name": "_nextDay",
+        "type": "boolean",
+        "description": "<p>add one day to result at the end of parsing </p>\n"
+      },
+      {
+        "name": "_offset",
+        "type": "number",
+        "description": "<p>utc time offset </p>\n"
+      },
+      {
+        "name": "_pf",
+        "type": "DateParsingFlags",
+        "description": "<p>date parsing flags </p>\n"
+      },
+      {
+        "name": "_strict",
+        "type": "boolean",
+        "description": "<p>use strict parse format </p>\n"
+      },
+      {
+        "name": "_tzm",
+        "type": "number",
+        "description": "<p>time zone </p>\n"
+      },
+      {
+        "name": "_w",
+        "type": "WeekParsing",
+        "description": "<p>date specific info \nweek </p>\n"
+      }
+    ]
+  },
+  "DateParsingFlags": {
+    "fileName": "src/bs-moment/create/parsing.types.ts",
+    "className": "DateParsingFlags",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
   "LocaleOptionsFormat": {
     "fileName": "src/chronos/locale/locale.class.ts",
     "className": "LocaleOptionsFormat",
@@ -156,13 +251,55 @@ export const ngdoc: any = {
     "methods": [],
     "properties": []
   },
+  "CalendarSpec": {
+    "fileName": "src/bs-moment/moment/calendar.ts",
+    "className": "CalendarSpec",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
+  "MomentFn": {
+    "fileName": "src/bs-moment/test/chain.ts",
+    "className": "MomentFn",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
+  "MomentInputObject": {
+    "fileName": "src/bs-moment/test/chain.ts",
+    "className": "MomentInputObject",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
   "TimeUnit": {
     "fileName": "src/chronos/types.ts",
     "className": "TimeUnit",
     "description": "",
     "methods": [],
     "properties": []
   },
+  "DateFormatterOptions": {
+    "fileName": "src/bs-moment/types.ts",
+    "className": "DateFormatterOptions",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
+  "DateObject": {
+    "fileName": "src/bs-moment/types.ts",
+    "className": "DateObject",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
+  "WeekParsing": {
+    "fileName": "src/bs-moment/types.ts",
+    "className": "WeekParsing",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
   "ButtonCheckboxDirective": {
     "fileName": "src/buttons/button-checkbox.directive.ts",
     "className": "ButtonCheckboxDirective",
@@ -2805,6 +2942,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>Css class for tooltip container</p>\n"
       },
+      {
+        "name": "delay",
+        "type": "number",
+        "description": "<p>Delay before showing the tooltip</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",
@@ -2874,7 +3016,6 @@ export const ngdoc: any = {
       },
       {
         "name": "tooltipPopupDelay",
-        "defaultValue": "0",
         "type": "number",
         "description": ""
       },

src/tooltip/tooltip.directive.ts

@@ -8,6 +8,9 @@ import { TooltipConfig } from './tooltip.config';
 import { ComponentLoader, ComponentLoaderFactory } from '../component-loader/index';
 import { OnChange } from '../utils/decorators';
 import { warnOnce } from '../utils/warn-once';
+import { parseTriggers } from '../utils/triggers';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/timer';
 
 @Directive({
   selector: '[tooltip], [tooltipHtml]',
@@ -64,6 +67,10 @@ export class TooltipDirective implements OnInit, OnDestroy {
    * Css class for tooltip container
    */
   @Input() containerClass = '';
+  /**
+   * Delay before showing the tooltip
+   */
+  @Input() delay: number;
 
   /**
    * Emits an event when the tooltip is shown
@@ -144,7 +151,11 @@ export class TooltipDirective implements OnInit, OnDestroy {
   }
 
   /** @deprecated */
-  @Input('tooltipPopupDelay') _delay = 0;
+  @Input('tooltipPopupDelay')
+  set _tooltipPopupDelay(value: number) {
+    warnOnce('tooltipPopupDelay is deprecated, use `delay` instead');
+    this.delay = value;
+  }
 
   /** @deprecated */
   @Input('tooltipFadeDuration') _fadeDuration = 150;
@@ -165,19 +176,20 @@ export class TooltipDirective implements OnInit, OnDestroy {
   @Output()
   tooltipStateChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
   protected _delayTimeoutId: number | any;
+  protected _tooltipCancelShowFn: Function;
 
   private _tooltip: ComponentLoader<TooltipContainerComponent>;
 
   constructor(_viewContainerRef: ViewContainerRef,
-                     _renderer: Renderer2,
-                     _elementRef: ElementRef,
+                     private _renderer: Renderer2,
+                     private _elementRef: ElementRef,
                      cis: ComponentLoaderFactory,
                      config: TooltipConfig) {
     this._tooltip = cis
       .createLoader<TooltipContainerComponent>(
-        _elementRef,
+        this._elementRef,
         _viewContainerRef,
-        _renderer
+        this._renderer
       )
       .provide({provide: TooltipConfig, useValue: config});
 
@@ -238,12 +250,26 @@ export class TooltipDirective implements OnInit, OnDestroy {
           placement: this.placement,
           containerClass: this.containerClass
         });
-    }
+    };
+    const cancelDelayedTooltipShowing = () => {
+      if (this._tooltipCancelShowFn) {
+        this._tooltipCancelShowFn();
+      }
+    };
 
-    if (this._delay) {
-      this._delayTimeoutId = setTimeout(() => {
+    if (this.delay) {
+      const timer = Observable.timer(this.delay).subscribe(() => {
         showTooltip();
-      }, this._delay);
+        cancelDelayedTooltipShowing();
+      });
+
+      if (this.triggers) {
+        const triggers = parseTriggers(this.triggers);
+        this._tooltipCancelShowFn = this._renderer.listen(this._elementRef.nativeElement, triggers[0].close, () => {
+          timer.unsubscribe();
+          cancelDelayedTooltipShowing();
+        });
+      }
     } else {
       showTooltip();
     }