diff --git a/src/app/tooltip/tooltip.sample.html b/src/app/tooltip/tooltip.sample.html
index a21360e2634..c25c210dd22 100644
--- a/src/app/tooltip/tooltip.sample.html
+++ b/src/app/tooltip/tooltip.sample.html
@@ -53,6 +53,20 @@
Simple tooltip settings
+
+ WebComponents tooltip
+
+ Hover over me
+
+
+
+ Hello from the tooltip!
+
+
+
+
Rich tooltip
diff --git a/src/app/tooltip/tooltip.sample.ts b/src/app/tooltip/tooltip.sample.ts
index 87b45beeaa2..5482ab0e370 100644
--- a/src/app/tooltip/tooltip.sample.ts
+++ b/src/app/tooltip/tooltip.sample.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
IgxAvatarComponent,
@@ -18,11 +18,18 @@ import {
IgxTooltipTargetDirective,
OverlaySettings,
} from 'igniteui-angular';
+import {
+ defineComponents,
+ IgcButtonComponent,
+ IgcTooltipComponent,
+} from 'igniteui-webcomponents';
+defineComponents(IgcTooltipComponent, IgcButtonComponent);
@Component({
selector: 'app-tooltip-sample',
styleUrls: ['tooltip.sample.css'],
templateUrl: 'tooltip.sample.html',
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [IgxAvatarComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxIconComponent, IgxIconButtonDirective, IgxSwitchComponent, FormsModule, IgxSliderComponent, IgxButtonDirective, IgxCardComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxRippleDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective]
})
export class TooltipSampleComponent implements OnInit {