feat(tooltip): add implementation for tooltipClass (#664)

valor-software · Jul 14, 2016 · fa4475a · fa4475a
1 parent 9070125
commit fa4475a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 16 deletions.
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
@@ -9,12 +9,13 @@ import { TOOLTIP_DIRECTIVES } from 'ng2-bootstrap/components/tooltip';
 ```typescript
 // class Tooltip implements OnInit
 @Directive({ selector: '[tooltip]' })
-export class TooltipDirective implements OnInit {
+export class TooltipDirective {
   @Input('tooltip') private content:string;
   @Input('tooltipPlacement') private placement:string = 'top';
   @Input('tooltipIsOpen') private isOpen:boolean;
   @Input('tooltipEnable') private enable:boolean;
   @Input('tooltipAppendToBody') private appendToBody:boolean;
+  @Input('tooltipClass') public popupClass:string;
 }
 ```
 
@@ -26,5 +27,5 @@ export class TooltipDirective implements OnInit {
   - `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
-  - `tooltipClass` (*not implemented*) (`?string`) - custom tooltip class applied to the tooltip container.
+  - `tooltipClass` (`?string`) - custom tooltip class applied to the tooltip container
   - `tooltipIsOpen` (`?boolean=false`) - if `true` tooltip is currently visible
diff --git a/components/tooltip/tooltip-container.component.ts b/components/tooltip/tooltip-container.component.ts
@@ -66,6 +66,10 @@ export class TooltipContainerComponent implements AfterViewInit {
       this.classMap.fade = true;
     }
 
+    if (this.popupClass) {
+      this.classMap[this.popupClass] = true;
+    }
+
     this.cdr.detectChanges();
   }
 }
diff --git a/components/tooltip/tooltip.directive.ts b/components/tooltip/tooltip.directive.ts
@@ -17,6 +17,7 @@ export class TooltipDirective {
   @Input('tooltipEnable') public enable:boolean = true;
   @Input('tooltipAnimation') public animation:boolean = true;
   @Input('tooltipAppendToBody') public appendToBody:boolean;
+  @Input('tooltipClass') public popupClass:string;
   /* tslint:enable */
 
   public viewContainerRef:ViewContainerRef;
@@ -44,7 +45,8 @@ export class TooltipDirective {
       htmlContent: this.htmlContent,
       placement: this.placement,
       animation: this.animation,
-      hostEl: this.viewContainerRef.element
+      hostEl: this.viewContainerRef.element,
+      popupClass: this.popupClass
     });
 
     let binding = ReflectiveInjector.resolve([

diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
@@ -597,3 +597,14 @@ pre {
   word-wrap: normal;
   word-break: normal;
 }
+
+/* Specify styling for tooltip contents */
+.tooltip.customClass .tooltip-inner {
+  color: #880000;
+  background-color: #ffff66;
+  box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+/* Hide arrow */
+.tooltip.customClass .tooltip-arrow {
+  display: none;
+}
diff --git a/demo/components/tooltip/tooltip-demo.ts b/demo/components/tooltip/tooltip-demo.ts
@@ -10,19 +10,7 @@ let template = require('./tooltip-demo.html');
   selector: 'tooltip-demo',
   template: template,
   directives: [TOOLTIP_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [`
-    /* Specify styling for tooltip contents */
-    .tooltip.customClass .tooltip-inner {
-        color: #880000;
-        background-color: #ffff66;
-        box-shadow: 0 6px 12px rgba(0,0,0,.175);
-    }
-    /* Hide arrow */
-    .tooltip.customClass .tooltip-arrow {
-        display: none;
-    }
-  `]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TooltipDemoComponent {
   public dynamicTooltip:string = 'Hello, World!';