feat(tooltip): added Tooltip delay functionality

components/tooltip/readme.md

@@ -8,7 +8,7 @@ import { TooltipModule } from 'ng2-bootstrap/components/tooltip';
 ### Annotations
 ```typescript
 // class Tooltip implements OnInit
-@Directive({ 
+@Directive({
   selector: '[tooltip]',
   exportAs: 'bs-tooltip'
 })
@@ -21,6 +21,7 @@ export class TooltipDirective {
   @Input('tooltipAppendToBody') private appendToBody:boolean;
   @Input('tooltipClass') public popupClass:string;
   @Input('tooltipContext') public tooltipContext:any;
+  @Input('tooltipPopupDelay') public delay:number = 0;
   @Output() public tooltipStateChanged:EventEmitter<boolean>;
 }
 ```
@@ -30,7 +31,7 @@ export class TooltipDirective {
   - `tooltipHtml` (`string|TempalteRef`) - tooltip custom html content, defined as string or template reference
   - `tooltipPlacement` (`?string='top'`) - tooltip positioning instruction, supported positions: 'top', 'bottom', 'left', 'right'
   - `tooltipAnimation` (`?boolean=true`) - if `false` fade tooltip animation will be disabled
-  - `tooltipPopupDelay` (*not implemented*) (`?numer=0`) - time in milliseconds before tooltip occurs
+  - `tooltipPopupDelay` (`?numer=0`) - time in milliseconds before tooltip occurs
   - `tooltipTrigger` (*not implemented*) (`?Array<string>`) - array of event names which triggers tooltip opening
   - `tooltipEnable` (`?boolean=true`) - if `false` tooltip is disabled and will not be shown
   - `tooltipAppendToBody` (*not implemented*) (`?boolean=false`) - if `true` tooltip will be appended to body
@@ -39,4 +40,4 @@ export class TooltipDirective {
   - `tooltipContext` (`any`) - if a template is used for the content, then this property can be used to specify a context for that template. The template variable exposed is called 'model'.
 
 ### Tooltip events
-  - `tooltipStateChanged` - This event fires each time the state of the tooltip is changed. Argument is boolean stating if the tooltip is visible or not.
+  - `tooltipStateChanged` - This event fires each time the state of the tooltip is changed. Argument is boolean stating if the tooltip is visible or not.

components/tooltip/tooltip.directive.ts

@@ -23,6 +23,7 @@ export class TooltipDirective {
   @Input('tooltipAppendToBody') public appendToBody:boolean;
   @Input('tooltipClass') public popupClass:string;
   @Input('tooltipContext') public tooltipContext:any;
+  @Input('tooltipPopupDelay') public delay:number = 0;
   /* tslint:enable */
 
   @Output() public tooltipStateChanged:EventEmitter<boolean> = new EventEmitter<boolean>();
@@ -33,6 +34,8 @@ export class TooltipDirective {
   private visible:boolean = false;
   private tooltip:ComponentRef<any>;
 
+  private delayTimeoutId:NodeJS.Timer;
+
   public constructor(viewContainerRef:ViewContainerRef, componentsHelper:ComponentsHelper) {
     this.viewContainerRef = viewContainerRef;
     this.componentsHelper = componentsHelper;
@@ -43,37 +46,46 @@ export class TooltipDirective {
   @HostListener('focusin')
   @HostListener('mouseenter')
   public show():void {
-    if (this.visible || !this.enable) {
+    if (this.visible || !this.enable || this.delayTimeoutId) {
       return;
     }
-    this.visible = true;
-    let options = new TooltipOptions({
-      content: this.content,
-      htmlContent: this.htmlContent,
-      placement: this.placement,
-      animation: this.animation,
-      hostEl: this.viewContainerRef.element,
-      popupClass: this.popupClass,
-      context: this.tooltipContext
-    });
-
-    let binding = ReflectiveInjector.resolve([
-      {provide: TooltipOptions, useValue: options}
-    ]);
-
-    this.tooltip = this.componentsHelper
-      .appendNextToLocation(TooltipContainerComponent, this.viewContainerRef, binding);
 
-    this.triggerStateChanged();
+    this.delayTimeoutId = setTimeout(() => {
+      this.visible = true;
+      let options = new TooltipOptions({
+        content: this.content,
+        htmlContent: this.htmlContent,
+        placement: this.placement,
+        animation: this.animation,
+        hostEl: this.viewContainerRef.element,
+        popupClass: this.popupClass,
+        context: this.tooltipContext
+      });
+
+      let binding = ReflectiveInjector.resolve([
+        {provide: TooltipOptions, useValue: options}
+      ]);
+
+      this.tooltip = this.componentsHelper
+        .appendNextToLocation(TooltipContainerComponent, this.viewContainerRef, binding);
+
+      this.triggerStateChanged();
+    }, this.delay);
   }
 
   // params event, target
   @HostListener('focusout')
   @HostListener('mouseleave')
   public hide():void {
+    if (this.delayTimeoutId) {
+      clearTimeout(this.delayTimeoutId);
+      this.delayTimeoutId = undefined;
+    }
+
     if (!this.visible) {
       return;
     }
+
     this.visible = false;
     this.tooltip.destroy();
     this.triggerStateChanged();

demo/components/tooltip/tooltip-demo.html

@@ -23,7 +23,7 @@
 </p>
 
 <p>
-  I can even contain HTML. <a href="#" [tooltipHtml]="htmlTooltip" (tooltipStateChanged)="tooltipStateChanged($event)">Check me out!</a>
+  I can even contain HTML. <a href="#" [tooltipPopupDelay]="500" [tooltipHtml]="htmlTooltip" (tooltipStateChanged)="tooltipStateChanged($event)">Check me out!</a>
 </p>
 
 <template #toolTipTemplate let-model="model">
@@ -32,13 +32,13 @@ <h5>With context binding: {{model.text}}</h5>
 </template>
 
 <p>
-  Or use a TemplateRef. <a href="#" [tooltipHtml]="toolTipTemplate" 
-                                    [tooltipContext]="tooltipModel" 
+  Or use a TemplateRef. <a href="#" [tooltipHtml]="toolTipTemplate"
+                                    [tooltipContext]="tooltipModel"
                                     (tooltipStateChanged)="tooltipStateChanged($event)">Check me out!</a>
 </p>
 <p>
   Programatically show/hide tooltip
-   <a href="#" [tooltip]="'Foo'" 
+   <a href="#" [tooltip]="'Foo'"
                (tooltipStateChanged)="tooltipStateChanged($event)"
                #tooltip="bs-tooltip">Check me out!</a>
    <button class="btn btn-primary" (click)="tooltip.show()">Show tooltip</button>