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>