Feature #3496: Tooltip optionally take a TemplateRef

src/app/components/tooltip/tooltip.ts

@@ -1,5 +1,5 @@
 import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
 import { PrimeNGConfig, TooltipOptions } from 'primeng/api';
 import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';
 import { Nullable } from 'primeng/ts-helpers';
@@ -92,10 +92,10 @@ export class Tooltip implements AfterViewInit, OnDestroy {
      */
     @Input() hideOnEscape: boolean = true;
     /**
-     * Text of the tooltip.
+     * Content of the tooltip.
      * @group Props
      */
-    @Input('pTooltip') text: string | undefined;
+    @Input('pTooltip') content: string | TemplateRef<HTMLElement> | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
@@ -163,7 +163,7 @@ export class Tooltip implements AfterViewInit, OnDestroy {
 
     resizeListener: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public zone: NgZone, public config: PrimeNGConfig, private renderer: Renderer2, private changeDetector: ChangeDetectorRef) {}
+    constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public zone: NgZone, public config: PrimeNGConfig, private renderer: Renderer2, private viewContainer: ViewContainerRef) {}
 
     ngAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
@@ -240,11 +240,11 @@ export class Tooltip implements AfterViewInit, OnDestroy {
             this.setOption({ disabled: simpleChange.disabled.currentValue });
         }
 
-        if (simpleChange.text) {
-            this.setOption({ tooltipLabel: simpleChange.text.currentValue });
+        if (simpleChange.content) {
+            this.setOption({ tooltipLabel: simpleChange.content.currentValue });
 
             if (this.active) {
-                if (simpleChange.text.currentValue) {
+                if (simpleChange.content.currentValue) {
                     if (this.container && this.container.offsetParent) {
                         this.updateText();
                         this.align();
@@ -436,11 +436,16 @@ export class Tooltip implements AfterViewInit, OnDestroy {
     }
 
     updateText() {
-        if (this.getOption('escape')) {
+        const content = this.getOption('tooltipLabel');
+        if (content instanceof TemplateRef) {
+            const embeddedViewRef = this.viewContainer.createEmbeddedView(content);
+            embeddedViewRef.detectChanges();
+            embeddedViewRef.rootNodes.forEach(node => this.tooltipText.appendChild(node));
+        } else if (this.getOption('escape')) {
             this.tooltipText.innerHTML = '';
-            this.tooltipText.appendChild(document.createTextNode(this.getOption('tooltipLabel')));
+            this.tooltipText.appendChild(document.createTextNode(content));
         } else {
-            this.tooltipText.innerHTML = this.getOption('tooltipLabel');
+            this.tooltipText.innerHTML = content;
         }
     }
 

src/app/showcase/doc/apidoc/index.json

@@ -22730,11 +22730,11 @@
                             "description": "Whether to hide tooltip on escape key press."
                         },
                         {
-                            "name": "text",
+                            "name": "content",
                             "optional": false,
                             "readonly": false,
-                            "type": "string",
-                            "description": "Text of the tooltip."
+                            "type": "string | TemplateRef<HTMLElement>",
+                            "description": "Content of the tooltip."
                         },
                         {
                             "name": "disabled",

src/app/showcase/doc/tooltip/templatedoc.ts

@@ -0,0 +1,54 @@
+import { Component, Input } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'options-doc',
+    template: ` <section>
+        <app-docsectiontext [title]="title" [id]="id">
+            <p>Tooltip can use either a <i>string</i> or a <i>TemplateRef</i>.</p>
+        </app-docsectiontext>
+        <div class="card flex justify-content-center">
+            <input type="text" pInputText [pTooltip]="tooltipContent" placeholder="hover to display tooltip" />
+            <ng-template #tooltipContent>
+                <div class="flex align-items-center">
+                    <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" height="20" class="mr-2" />
+                    <span>
+                        <b>PrimeNG</b> rocks!
+                    </span>
+                </div>
+            </ng-template>
+        </div>
+        <app-code [code]="code" selector="tooltip-template-demo"></app-code>
+    </section>`
+})
+export class TemplateDoc {
+    @Input() id: string;
+
+    @Input() title: string;
+
+    code: Code = {
+        basic: `
+<input type="text" pInputText [pTooltip]="tooltipContent" placeholder="hover to display tooltip">
+
+<ng-template #tooltipContent>
+    <div class="flex align-items-center">
+        <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" height="20" class="mr-2" />
+        <span>
+            <b>PrimeNG</b> rocks!
+        </span>
+    </div>
+</ng-template>`,
+
+        html: `
+<input type="text" pInputText [pTooltip]="tooltipContent" placeholder="hover to display tooltip">
+
+<ng-template #tooltipContent>
+    <div class="flex align-items-center">
+        <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" height="20" class="mr-2" />
+        <span>
+            <b>PrimeNG</b> rocks!
+        </span>
+    </div>
+</ng-template>`
+    };
+}

src/app/showcase/doc/tooltip/tooltipdoc.module.ts

@@ -15,10 +15,11 @@ import { AutoHideDoc } from './autohidedoc';
 import { DelayDoc } from './delaydoc';
 import { OptionsDoc } from './optionsdoc';
 import { AccessibilityDoc } from './accessibilitydoc';
+import { TemplateDoc } from './templatedoc';
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, RouterModule, TooltipModule, ButtonModule, InputTextModule, AppDocModule],
-    declarations: [BasicDoc, ImportDoc, StyleDoc, PositionDoc, EventDoc, AutoHideDoc, DelayDoc, OptionsDoc, AccessibilityDoc],
+    declarations: [BasicDoc, ImportDoc, StyleDoc, PositionDoc, EventDoc, AutoHideDoc, DelayDoc, TemplateDoc, OptionsDoc, AccessibilityDoc],
     exports: [AppDocModule]
 })
 export class TooltipDocModule {}

src/app/showcase/pages/tooltip/tooltipdemo.ts

@@ -8,6 +8,7 @@ import { AutoHideDoc } from '../../doc/tooltip/autohidedoc';
 import { DelayDoc } from '../../doc/tooltip/delaydoc';
 import { OptionsDoc } from '../../doc/tooltip/optionsdoc';
 import { AccessibilityDoc } from '../../doc/tooltip/accessibilitydoc';
+import { TemplateDoc } from '../../doc/tooltip/templatedoc';
 
 @Component({
     templateUrl: './tooltipdemo.html'
@@ -24,6 +25,11 @@ export class TooltipDemo {
             label: 'Basic',
             component: BasicDoc
         },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
         {
             id: 'position',
             label: 'Position',