fix(tooltip-placement): add close icon to tooltips

Author: RivaIvanova

src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html

@@ -1,8 +1,8 @@
 <div class="container">
     @for (position of positions; track position) {
-    <div igxTooltip>
-        {{ position }}
-    </div>
+        <div #tooltip="tooltip" igxTooltip>
+            {{ position }} <igx-icon (click)="tooltip.close()">close</igx-icon>
+        </div>
     }
 
     <button

src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss

@@ -8,3 +8,7 @@
     height: 120px;
     border-radius: 0.5rem;
 }
+
+igx-icon {
+    cursor: default;
+}

src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts

@@ -6,14 +6,15 @@ import {
     VerticalAlignment,
     PositionSettings,
     OverlaySettings,
-    TooltipPositionStrategy
+    TooltipPositionStrategy,
+    IgxIconComponent
 } from "igniteui-angular";
 
 @Component({
     selector: "app-tooltip-placement",
     styleUrls: ["./tooltip-placement.component.scss"],
     templateUrl: "./tooltip-placement.component.html",
-    imports: [IgxButtonDirective, IgxTooltipDirective]
+    imports: [IgxButtonDirective, IgxTooltipDirective, IgxIconComponent]
 })
 export class TooltipPlacementComponent {
     @ViewChildren(IgxTooltipDirective)