feat(tooltip): tooltip html content (#724)

* Implemented html content for tooltip
valor-software · Jul 14, 2016 · 9070125 · 9070125
1 parent b2e009b
commit 9070125
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/components/tooltip/tooltip-container.component.ts b/components/tooltip/tooltip-container.component.ts
@@ -13,7 +13,12 @@ import {TooltipOptions} from './tooltip-options.class';
      [ngStyle]="{top: top, left: left, display: display}"
      [ngClass]="classMap">
       <div class="tooltip-arrow"></div>
-      <div class="tooltip-inner">
+      <div class="tooltip-inner"
+           *ngIf="htmlContent" 
+           innerHtml="{{htmlContent}}">
+      </div>
+      <div class="tooltip-inner"
+           *ngIf="content">
         {{content}}
       </div>
     </div>`
@@ -25,6 +30,7 @@ export class TooltipContainerComponent implements AfterViewInit {
   private left:string = '-1000px';
   private display:string = 'block';
   private content:string;
+  private htmlContent:string;
   private placement:string;
   private popupClass:string;
   private animation:boolean;

diff --git a/components/tooltip/tooltip-options.class.ts b/components/tooltip/tooltip-options.class.ts
@@ -6,6 +6,8 @@ export class TooltipOptions {
   public popupClass:string;
   public animation:boolean;
   public isOpen:boolean;
+  public content:string;
+  public htmlContent:string;
 
   public constructor(options:Object) {
     Object.assign(this, options);

diff --git a/components/tooltip/tooltip.directive.ts b/components/tooltip/tooltip.directive.ts
@@ -5,10 +5,13 @@ import {
 import {TooltipOptions} from './tooltip-options.class';
 import {TooltipContainerComponent} from './tooltip-container.component';
 
-@Directive({selector: '[tooltip]'})
+/* tslint:disable */
+@Directive({selector: '[tooltip], [tooltipHtml]'})
+/* tslint:enable */
 export class TooltipDirective {
   /* tslint:disable */
   @Input('tooltip') public content:string;
+  @Input('tooltipHtml') public htmlContent:string;
   @Input('tooltipPlacement') public placement:string = 'top';
   @Input('tooltipIsOpen') public isOpen:boolean;
   @Input('tooltipEnable') public enable:boolean = true;
@@ -38,6 +41,7 @@ export class TooltipDirective {
     this.visible = true;
     let options = new TooltipOptions({
       content: this.content,
+      htmlContent: this.htmlContent,
       placement: this.placement,
       animation: this.animation,
       hostEl: this.viewContainerRef.element

diff --git a/demo/components/tooltip/tooltip-demo.html b/demo/components/tooltip/tooltip-demo.html
@@ -23,7 +23,7 @@
 </p>
 
 <p>
-  I can even contain HTML. <a href="#" tooltipHtml="htmlTooltip">Check me out!</a>
+  I can even contain HTML. <a href="#" [tooltipHtml]="htmlTooltip">Check me out!</a>
 </p>
 
 <p>