feat(tooltip): Make appendToBody work in Tooltip (#1074)

valor-software · Oct 24, 2016 · 7e233b1 · 7e233b1
1 parent 045573b
commit 7e233b1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/components/tooltip/tooltip.directive.ts b/components/tooltip/tooltip.directive.ts
@@ -28,7 +28,7 @@ export class TooltipDirective {
   @Input('tooltipIsOpen') public isOpen: boolean;
   @Input('tooltipEnable') public enable: boolean = true;
   @Input('tooltipAnimation') public animation: boolean = true;
-  @Input('tooltipAppendToBody') public appendToBody: boolean;
+  @Input('tooltipAppendToBody') public appendToBody: boolean = false;
   @Input('tooltipClass') public popupClass: string;
   @Input('tooltipContext') public tooltipContext: any;
   @Input('tooltipPopupDelay') public delay: number = 0;
@@ -71,14 +71,16 @@ export class TooltipDirective {
         context: this.tooltipContext
       });
 
-      let binding = ReflectiveInjector.resolve([
-        {provide: TooltipOptions, useValue: options}
-      ]);
-
-      this.tooltip = this.componentsHelper
-        .appendNextToLocation(TooltipContainerComponent,
-          this.viewContainerRef,
-          binding);
+      if (this.appendToBody) {
+        this.tooltip = this.componentsHelper
+          .appendNextToRoot(TooltipContainerComponent, TooltipOptions, options);
+      } else {
+        let binding = ReflectiveInjector.resolve([
+          {provide: TooltipOptions, useValue: options}
+        ]);
+        this.tooltip = this.componentsHelper
+          .appendNextToLocation(TooltipContainerComponent, this.viewContainerRef, binding);
+      }
 
       this.triggerStateChanged();
     };

diff --git a/demo/components/tooltip/tooltip-demo.html b/demo/components/tooltip/tooltip-demo.html
@@ -49,6 +49,10 @@ <h5>With context binding: {{model.text}}</h5>
   I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!" tooltipClass="customClass">Check me out!</a>
 </p>
 
+<p style="overflow:hidden; position:relative; background-color: #f6f6f6" class="alert">
+  And if I am in <a href="#" tooltip="That ruins the tooltip">overflow: hidden</a> container, then just <a href="#" tooltip="So the tooltip is visible always correctly" [tooltipAppendToBody]="true">tooltipAppendToBody</a> me instead!
+</p>
+
 <form role="form">
   <div class="form-group">
     <label>Or use custom triggers, like focus: </label>