feat(sample): add webcomponent tooltip to the sample (#16488)

Co-authored-by: Silvia Ivanova <[email protected]>

Author: didimmova

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">

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 {