From 9b692703372aa12c7081465d4a436b6178df042c Mon Sep 17 00:00:00 2001
From: Ilya Surmay <ilya.surmay@gmail.com>
Date: Fri, 2 Dec 2016 01:36:57 +0200
Subject: [PATCH] feat(tooltips): add fade out effect (#1266)

---
 components/tooltip/readme.md              |  4 +++-
 components/tooltip/tooltip.directive.ts   | 10 +++++++---
 demo/assets/css/style.css                 |  5 ++++-
 demo/components/tooltip/tooltip-demo.html |  2 +-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index b1105afd1e..95a3c2e672 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -22,6 +22,7 @@ export class TooltipDirective {
   @Input('tooltipClass') protected popupClass:string;
   @Input('tooltipContext') public tooltipContext:any;
   @Input('tooltipPopupDelay') public delay:number = 0;
+  @Input('tooltipFadeDuration') public fadeDuration:number = 150;
   @Output() public tooltipStateChanged:EventEmitter<boolean>;
 }
 ```
@@ -31,7 +32,8 @@ 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` (`?numer=0`) - time in milliseconds before tooltip occurs
+  - `tooltipPopupDelay` (`?number=0`) - time in milliseconds before tooltip occurs
+  - `tooltipFadeDuration` (`?number=150`) - time in milliseconds for tooltip to fade out. This value must be the same as transition-duration in your css
   - `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` (`?boolean=false`) - if `true` tooltip will be appended to body
diff --git a/components/tooltip/tooltip.directive.ts b/components/tooltip/tooltip.directive.ts
index dd8c56d0e6..011eb1ffd8 100644
--- a/components/tooltip/tooltip.directive.ts
+++ b/components/tooltip/tooltip.directive.ts
@@ -33,6 +33,7 @@ export class TooltipDirective {
   @Input('tooltipClass') public popupClass: string;
   @Input('tooltipContext') public tooltipContext: any;
   @Input('tooltipPopupDelay') public delay: number = 0;
+  @Input('tooltipFadeDuration') public fadeDuration: number = 150;
   /* tslint:enable */
 
   @Output() public tooltipStateChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
@@ -110,10 +111,13 @@ export class TooltipDirective {
     if (!this.visible) {
       return;
     }
+    this.tooltip.instance.classMap.in = false;
+    setTimeout(() => {
+      this.visible = false;
+      this.tooltip.destroy();
+      this.triggerStateChanged();
+    }, this.fadeDuration);
 
-    this.visible = false;
-    this.tooltip.destroy();
-    this.triggerStateChanged();
   }
 
   protected triggerStateChanged(): void {
diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
index e2bbd8dd0a..0e9e73525d 100644
--- a/demo/assets/css/style.css
+++ b/demo/assets/css/style.css
@@ -605,6 +605,9 @@ pre {
   box-shadow: 0 6px 12px rgba(0,0,0,.175);
 }
 /* Hide arrow */
+.tooltip.customClass.fade{
+  transition: opacity 1s;
+}
 .tooltip.customClass .tooltip-arrow {
   display: none;
 }
@@ -614,4 +617,4 @@ pre {
 }
 .nav-item.customClass a {
 	background-color: #50ff50;
-}
\ No newline at end of file
+}
diff --git a/demo/components/tooltip/tooltip-demo.html b/demo/components/tooltip/tooltip-demo.html
index 322dfcc393..d8f34aeb94 100644
--- a/demo/components/tooltip/tooltip-demo.html
+++ b/demo/components/tooltip/tooltip-demo.html
@@ -46,7 +46,7 @@ <h5>With context binding: {{model.text}}</h5>
  </p>
 
 <p>
-  I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!" tooltipClass="customClass">Check me out!</a>
+  I can have a custom class. <a href="#" [tooltip]="'I can have a custom class applied to me!'" [tooltipClass]="'customClass'" [tooltipFadeDuration]="1000">Check me out!</a>
 </p>
 
 <p style="overflow:hidden; position:relative; background-color: #f6f6f6" class="alert">