From 7ad2227d4727eb539d8316cd474f5838f61ecfa6 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 20 Nov 2025 11:32:57 +0200
Subject: [PATCH] feat(sample): add webcomponent tooltip to the sample

---
 src/app/tooltip/tooltip.sample.html | 14 ++++++++++++++
 src/app/tooltip/tooltip.sample.ts   |  9 ++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

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 @@ <h4 class="sample-title">Simple tooltip settings</h4>
         </div>
     </article>
 
+    <article class="column">
+        <h4 class="sample-title">WebComponents tooltip</h4>
+        <div style="margin: 10dvh 5dvw">
+            <igc-button id="basic-tooltip"> Hover over me </igc-button>
+        </div>
+
+        <igc-tooltip
+            anchor="basic-tooltip"
+        >
+        Hello from the tooltip!
+        <button class="my-close-btn">Close Me</button>
+        </igc-tooltip>
+    </article>
+
     <article class="column">
         <h4 class="sample-title">Rich tooltip</h4>
         <article class="card-wrapper">
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 {