diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts
index 5cb8c9e73b7..990c132832e 100755
--- a/src/app/components/tooltip/tooltip.ts
+++ b/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';
@@ -16,11 +16,6 @@ import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
     }
 })
 export class Tooltip implements AfterViewInit, OnDestroy {
-    /**
-     * When present, it adds a custom id to the tooltip.
-     * @group Props
-     */
-    @Input() id: string | undefined;
     /**
      * Position of the tooltip.
      * @group Props
@@ -97,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
@@ -136,7 +131,7 @@ export class Tooltip implements AfterViewInit, OnDestroy {
         life: null,
         autoHide: true,
         hideOnEscape: true,
-        id: null
+        id: UniqueComponentId() + '_tooltip'
     };
 
     _disabled: boolean | undefined;
@@ -169,10 +164,9 @@ 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() {
-        this.id = this.id || UniqueComponentId() + '_tooltip';
         if (isPlatformBrowser(this.platformId)) {
             this.zone.runOutsideAngular(() => {
                 if (this.getOption('tooltipEvent') === 'hover') {
@@ -247,11 +241,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();
@@ -264,14 +258,14 @@ export class Tooltip implements AfterViewInit, OnDestroy {
             }
         }
 
-        if (simpleChange.id) {
-            this.setOption({ id: simpleChange.id.currentValue });
-        }
-
         if (simpleChange.autoHide) {
             this.setOption({ autoHide: simpleChange.autoHide.currentValue });
         }
 
+        if (simpleChange.id) {
+            this.setOption({ id: simpleChange.id.currentValue });
+        }
+
         if (simpleChange.tooltipOptions) {
             this._tooltipOptions = { ...this._tooltipOptions, ...simpleChange.tooltipOptions.currentValue };
             this.deactivate();
@@ -368,7 +362,7 @@ export class Tooltip implements AfterViewInit, OnDestroy {
         }
 
         this.container = document.createElement('div');
-        this.container.setAttribute('id', this.getOption('id') || this.id);
+        this.container.setAttribute('id', this.getOption('id'));
         this.container.setAttribute('role', 'tooltip');
 
         let tooltipArrow = document.createElement('div');
@@ -446,11 +440,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;
         }
     }