costimize tooltip

src/app/app.component.html

@@ -1,9 +1,13 @@
 <app-componentWithContentOrNot>
-  <button [c3Tooltip]="content">Sourie !</button>
+  <button [c3Tooltip]="content" [c3TooltipHideDelay]="10000" [c3TooltipShowDelay]="1000">Sourie !</button>
   <c3-tooltip #content="c3Tooltip">
     Bonjour, je suis le content avec du <strong>html !!!</strong>
   </c3-tooltip>
 </app-componentWithContentOrNot>
+<p [c3Tooltip]="another" [c3TooltipDisabled]="true">message</p>
+<c3-tooltip #another="c3Tooltip">
+  Bonjour, je suis une tooltip mis sur un p avec du <strong>html !!!</strong>
+</c3-tooltip>
 <p>message</p>
 <p>message</p>
 <p>message</p>
@@ -12,8 +16,7 @@
 <p>message</p>
 <p>message</p>
 <p>message</p>
-<p>message</p>
-<p [c3Tooltip]="another">message</p>
-<c3-tooltip #another="c3Tooltip">
+<p [c3Tooltip]="another1">message</p>
+<c3-tooltip #another1="c3Tooltip">
   Bonjour, je suis une tooltip mis sur un p avec du <strong>html !!!</strong>
 </c3-tooltip>

src/app/c3-tooltip/c3-tooltip.component.html

@@ -1,5 +1,5 @@
-<ng-template>	
-	<div class="c3-tooltip-panel">
-		<ng-content ></ng-content>
-	</div>
+<ng-template>
+  <div class="c3-tooltip-panel" [ngClass]="tooltipClass">
+    <ng-content></ng-content>
+  </div>
 </ng-template>

src/app/c3-tooltip/c3-tooltip.component.ts

@@ -1,17 +1,21 @@
-import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { Component, ViewChild, TemplateRef, ChangeDetectorRef } from '@angular/core';
+
 
 @Component({
-	selector: 'c3-tooltip',
-	templateUrl: './c3-tooltip.component.html',
-	styleUrls: ['./c3-tooltip.component.css'],
-	exportAs: 'c3Tooltip'
+  selector: 'c3-tooltip',
+  templateUrl: './c3-tooltip.component.html',
+  styleUrls: ['./c3-tooltip.component.css'],
+  exportAs: 'c3Tooltip'
 })
-export class C3Tooltip implements OnInit {
-	@ViewChild(TemplateRef, { read: false }) template: TemplateRef<any>;
+export class C3Tooltip {
+  @ViewChild(TemplateRef, { read: false }) template: TemplateRef<any>;
 
-	constructor() { }
+  /** Classes to be added to the tooltip. Supports the same syntax as `ngClass`. */
+  tooltipClass: string | string[] | Set<string> | { [key: string]: any };
 
-	ngOnInit() {
-	}
+  constructor(private _changeDetectorRef: ChangeDetectorRef) { }
 
+  _markForCheck(): void {
+    this._changeDetectorRef.markForCheck();
+  }
 }

src/app/c3-tooltip/c3-tooltip.module.ts

@@ -2,20 +2,20 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { C3Tooltip } from './c3-tooltip.component';
-import { C3TooltipTrigger } from './c3-tooltipTrigger.directive';
+import { C3TooltipTrigger } from './c3-tooltipTrigger';
 
 @NgModule({
-   imports: [
-		CommonModule,
-		OverlayModule
-   ],
-   declarations: [
-		C3Tooltip,
-		C3TooltipTrigger
-	 ],
-	 exports: [
-		C3Tooltip,
-		C3TooltipTrigger
-	 ]
+  imports: [
+    CommonModule,
+    OverlayModule
+  ],
+  declarations: [
+    C3Tooltip,
+    C3TooltipTrigger
+  ],
+  exports: [
+    C3Tooltip,
+    C3TooltipTrigger
+  ]
 })
 export class C3TooltipModule { }

src/app/c3-tooltip/c3-tooltipTrigger.directive.ts → src/app/c3-tooltip/c3-tooltipTrigger.ts

@@ -1,9 +1,10 @@
 import { Directive, forwardRef, Input, AfterViewInit, ElementRef, ViewContainerRef, OnDestroy, NgZone } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { C3Tooltip } from './c3-tooltip.component';
 import { Overlay, OverlayConfig, ScrollDispatcher, OverlayRef } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 import { TemplatePortal } from '@angular/cdk/portal';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 export const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -19,17 +20,37 @@ export const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
 export class C3TooltipTrigger implements AfterViewInit, OnDestroy {
   overlayRef: OverlayRef | null;
 
+  /** The timeout ID of any current timer set to show the tooltip */
+  _showTimeoutId: number | null;
+
+  /** The timeout ID of any current timer set to hide the tooltip */
+  _hideTimeoutId: number | null;
+
+  private _manualListeners = new Map<string, EventListenerOrEventListenerObject>();
+  private _tooltipClass: string | string[] | Set<string> | { [key: string]: any };
+  private _tootipDisabled: boolean = false;
+
   @Input('c3Tooltip') tooltip: C3Tooltip;
 
-  @Input('c3TooltipDisabled') disabled: Boolean = false;
+  @Input('c3TooltipDisabled')
+  get tooltipDisabled(): boolean { return this._tootipDisabled; }
+  set tooltipDisabled(value: boolean) {
+    this._tootipDisabled = coerceBooleanProperty(value)
+  };
 
-  /** The default delay in ms before showing the tooltip after show is called */
   @Input('c3TooltipShowDelay') showDelay = 0;
 
-  /** The default delay in ms before hiding the tooltip after hide is called */
   @Input('c3TooltipHideDelay') hideDelay = 0;
 
-  private _manualListeners = new Map<string, EventListenerOrEventListenerObject>();
+  @Input('c3TooltipClass')
+  get tooltipClass() { return this._tooltipClass; }
+  set tooltipClass(value: string | string[] | Set<string> | { [key: string]: any }) {
+    this._tooltipClass = value;
+    if (this.tooltip) {
+      this.tooltip.tooltipClass = this._tooltipClass;
+      this.tooltip._markForCheck()
+    }
+  }
 
   constructor(
     private _element: ElementRef<HTMLElement>,
@@ -56,16 +77,38 @@ export class C3TooltipTrigger implements AfterViewInit, OnDestroy {
     this._manualListeners.clear();
   }
 
-  show() {
-    const overlayRef = this._overlay.create(this.getOverlayConfig());
-    const portal = new TemplatePortal(this.tooltip.template, this._viewContainerRef);
-    overlayRef.attach(portal);
+  show(delay: number = this.showDelay) {
+    if (this.tooltipDisabled) {
+      return;
+    }
+
+    if (this._hideTimeoutId) {
+      clearTimeout(this._hideTimeoutId);
+      this._hideTimeoutId = null;
+    }
+    this._showTimeoutId = window.setTimeout(() => {
+      this._showTimeoutId = null;
+
+      const overlayRef = this._overlay.create(this.getOverlayConfig());
+      const portal = new TemplatePortal(this.tooltip.template, this._viewContainerRef);
+      overlayRef.attach(portal);
 
-    this.overlayRef = overlayRef;
+      this.overlayRef = overlayRef;
+    }, delay);
   }
 
-  hide() {
-    this.overlayRef.detach();
+  hide(delay: number = this.hideDelay) {
+    if (this._showTimeoutId) {
+      clearTimeout(this._showTimeoutId);
+      this._showTimeoutId = null;
+    }
+
+    this._hideTimeoutId = window.setTimeout(() => {
+      this._hideTimeoutId = null;
+
+      if (this.overlayRef && this.overlayRef.hasAttached())
+        this.overlayRef.detach();
+    }, delay);
   }
 
   private getOverlayConfig(): OverlayConfig {