diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md index 4295cded04..957d149f68 100644 --- 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`) - 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 index c3880691b4..3509e18795 100644 --- 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 index 92c8ba6dc2..1eb910d91b 100644 --- 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 index 3fe3510ea6..f815679acb 100644 --- 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; +} \ No newline at end of file diff --git a/demo/components/tooltip/tooltip-demo.ts b/demo/components/tooltip/tooltip-demo.ts index 21f3696489..b457147ef7 100644 --- 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!';