feat(tooltips): add fade out effect (#1266)

valor-software · Dec 1, 2016 · 9b69270 · 9b69270
1 parent a1f563e
commit 9b69270
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
-}
+}
diff --git 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">