feat(tooltip): align with WC tooltip

CHANGELOG.md

@@ -2,6 +2,41 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.0.0
+### General
+- `IgxTooltipTarget`
+    - **Behavioral Changes**
+        - The `showDelay` input property now defaults to `200`.
+        - The `hideDelay` input property now defaults to `300`.
+        - The `showTooltip` and `hideTooltip` methods do not take `showDelay`/`hideDelay` into account.
+
+### New Features
+- `IgxTooltip`
+    - The tooltip now remains open while interacting with it.
+- `IgxTooltipTarget`
+    - Introduced a new `hasArrow` input property. Controls whether to display an arrow indicator for the tooltip. Defaults to `false`.
+    - Introduced a new `sticky` input property. When set to `true`, the tooltip renders a default close icon `x`. The tooltip remains visible until the user closes it via the close icon `x` or `Esc` key. Defaults to `false`.
+    - Introduced a new `closeButtonTemplate` input property that allows templating the default close icon `x`.
+    ```html
+    <igx-icon [igxTooltipTarget]="tooltipRef" [closeButtonTemplate]="customClose">info</igx-icon>
+    <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
+
+    <ng-template #customClose>
+        <button igxButton>Close</button>
+    </ng-template>
+    ```
+
+    - Introduced a new `placement` input property of type `TooltipPlacement`. Controls where to place the tooltip relative to the target element. Default value is `bottom`. Supported values are `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`.
+
+    _Note:_ Positioning the arrow is based on the `placement` property. If `hasArrow` is set to `true`, changing the `placement` property will change the arrow position as well.
+    ```html
+    <igx-icon [igxTooltipTarget]="tooltipRef" [placement]="'top-start'">info</igx-icon>
+    <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
+    ```
+    - Introduced a new `offset` input property. Controls the offset of the tooltip from the target in pixels. Default value is 6.
+
+    _Note:_ If a custom `positionStrategy` is used, the `placement` and `offset` properties (if set) will not be taken into account and the arrow (if enabled) will not be displayed.
+
 ## 19.2.0
 
 ### General

projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss

@@ -10,6 +10,22 @@
 
         @extend %tooltip-display !optional;
 
+        @include m(top) {
+            @extend %arrow--top !optional;
+        }
+
+        @include m(bottom) {
+            @extend %arrow--bottom !optional;
+        }
+
+        @include m(left) {
+            @extend %arrow--left !optional;
+        }
+
+        @include m(right) {
+            @extend %arrow--right !optional;
+        }
+
         @include m(hidden) {
             @extend %tooltip--hidden !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss

@@ -75,23 +75,57 @@
     @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'variant');
 
+    $transparent-border: rem(4px) solid transparent;
+    $color-border: rem(4px) solid var-get($theme, 'background');
+
     %tooltip-display {
-        display: inline-flex;
-        justify-content: center;
-        flex-flow: column wrap;
+        display: flex;
+        align-items: flex-start;
+        text-align: start;
         background: var-get($theme, 'background');
         color: var-get($theme, 'text-color');
         border-radius: var-get($theme, 'border-radius');
         box-shadow: map.get($theme, 'shadow');
-        margin: 0 auto;
-        padding: 0 rem(8px);
+        padding: rem(4px) rem(8px);
+        gap: rem(8px);
         min-height: rem(24px);
+        min-width: rem(24px);
+        max-width: 200px;
+        width: fit-content;
+
+        igx-icon {
+            --component-size: 1;
+        }
 
-        @if $variant == 'indigo' {
-            padding: rem(4px) rem(8px);
+        igx-tooltip-close-button {
+            display: flex;
         }
     }
 
+    %arrow--top {
+        border-left: $transparent-border;
+        border-right: $transparent-border;
+        border-top: $color-border;
+    }
+
+    %arrow--bottom {
+        border-left: $transparent-border;
+        border-right: $transparent-border;
+        border-bottom: $color-border;
+    }
+
+    %arrow--left {
+        border-top: $transparent-border;
+        border-bottom: $transparent-border;
+        border-left: $color-border;
+    }
+
+    %arrow--right {
+        border-top: $transparent-border;
+        border-bottom: $transparent-border;
+        border-right: $color-border;
+    }
+
     %tooltip--hidden {
         display: none;
     }
@@ -112,6 +146,7 @@
         }
     } @else {
         %tooltip-display {
+            line-height: rem(16px);
             font-size: rem(10px);
             font-weight: 600;
         }

projects/igniteui-angular/src/lib/directives/tooltip/README.md

@@ -104,8 +104,8 @@ Since the **IgxTooltip** directive extends the **IgxToggle** directive and there
 ### Methods
 | Name | Type | Arguments | Description |
 | :--- |:--- | :--- | :--- |
-| showTooltip | void | N/A | Shows the tooltip after the amount of ms specified by the `showDelay` property. |
-| hideTooltip | void | N/A | Hides the tooltip after the amount of ms specified by the `hideDelay` property. |
+| showTooltip | void | N/A | Shows the tooltip. |
+| hideTooltip | void | N/A | Hides the tooltip. |
 
 ### Events
 |Name|Description|Cancelable|Event arguments|

projects/igniteui-angular/src/lib/directives/tooltip/enums.ts

@@ -0,0 +1,17 @@
+import { mkenum } from '../../core/utils';
+
+export const TooltipPlacement = /*@__PURE__*/mkenum({
+    top: 'top',
+    topStart: 'top-start',
+    topEnd: 'top-end',
+    bottom: 'bottom',
+    bottomStart: 'bottom-start',
+    bottomEnd: 'bottom-end',
+    right: 'right',
+    rightStart: 'right-start',
+    rightEnd: 'right-end',
+    left: 'left',
+    leftStart: 'left-start',
+    leftEnd: 'left-end'
+});
+export type TooltipPlacement = (typeof TooltipPlacement)[keyof typeof TooltipPlacement];

projects/igniteui-angular/src/lib/directives/tooltip/public_api.ts

@@ -3,6 +3,7 @@ import { IgxTooltipDirective } from './tooltip.directive';
 
 export * from './tooltip.directive';
 export * from './tooltip-target.directive';
+export { TooltipPlacement } from './enums';
 
 /* NOTE: Tooltip directives collection for ease-of-use import in standalone components scenario */
 export const IGX_TOOLTIP_DIRECTIVES = [

projects/igniteui-angular/src/lib/directives/tooltip/tooltip-close-button.component.ts

@@ -0,0 +1,28 @@
+import { Component, Output, EventEmitter, HostListener, Input, TemplateRef } from '@angular/core';
+import { IgxIconComponent } from '../../icon/icon.component';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'igx-tooltip-close-button',
+  template: `
+        <ng-container *ngIf="customTemplate; else defaultTemplate">
+            <ng-container *ngTemplateOutlet="customTemplate"></ng-container>
+        </ng-container>
+        <ng-template #defaultTemplate>
+            <igx-icon aria-hidden="true" family="default" name="close"></igx-icon>
+        </ng-template>
+  `,
+  imports: [IgxIconComponent, CommonModule],
+})
+export class IgxTooltipCloseButtonComponent {
+    @Input()
+    public customTemplate: TemplateRef<any>;
+
+    @Output()
+    public clicked = new EventEmitter<void>();
+
+    @HostListener('click')
+    public handleClick() {
+        this.clicked.emit();
+    }
+}