feat(tooltip): align with WC tooltip

CHANGELOG.md

@@ -10,9 +10,89 @@ All notable changes for each version of this project will be documented in this
     this.carousel.select(2, Direction.NEXT);
     ```
 
+- `IgxOverlay`
+    - Position Settings now accept a new optional `offset` input property of type `number`. Used to set the offset of the element from the target in pixels.
+
+- `IgxTooltip`
+    - The tooltip now remains open while interacting with it.
+- `IgxTooltipTarget`
+    - Introduced a new `positionSettings` input property. Controls the position and animation settings used by the tooltip.
+    - 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 `hasArrow` input property. Controls whether to display an arrow indicator for the tooltip. Defaults to `false`.
+
+    _Note:_ The tooltip uses the `TooltipPositionStrategy` to position the tooltip and arrow element. If a custom position strategy is used (`overlaySettings.positionStrategy`) and `hasArrow` is set to `true`, the custom strategy should extend the `TooltipPositionStrategy`. Otherwise, the arrow will not be displayed.
+
+    _Note:_ The arrow element is positioned based on the provided position settings. If the directions and starting points do not correspond to any of the predefined position values, the arrow is positioned in the top middle side of the tooltip (default tooltip position `bottom`).
+
+
+    | Position     | Horizontal Direction          | Horizontal Start Point         | Vertical Direction            | Vertical Start Point           |
+    |--------------|-------------------------------|--------------------------------|-------------------------------|--------------------------------|
+    | top          | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Top         | VerticalAlignment.Top          |
+    | top-start    | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Top          |
+    | top-end      | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Top          |
+    | bottom       | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
+    | bottom-start | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
+    | bottom-end   | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
+    | right        | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Middle      | VerticalAlignment.Middle       |
+    | right-start  | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Top          |
+    | right-end    | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Bottom       |
+    | left         | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Middle      | VerticalAlignment.Middle       |
+    | left-start   | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Top          |
+    | left-end     | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Bottom       |
+
+
+    The arrow's position can be customized by overriding the `positionArrow(arrow: HTMLElement, arrowFit: ArrowFit)` method.
+
+    For example:
+
+    ```ts
+    export class CustomStrategy extends TooltipPositioningStrategy {
+        constructor(settings?: PositionSettings) {
+            super(settings);
+        }
+
+        public override positionArrow(arrow: HTMLElement, arrowFit: ArrowFit): void {
+            Object.assign(arrow.style, {
+                left: '-0.25rem',
+                transform: 'rotate(-45deg)',
+                [arrowFit.direction]: '-0.25rem',
+            });
+        }
+    }
+
+    public overlaySettings: OverlaySettings = {
+        positionStrategy: new CustomStrategy({
+            horizontalDirection: HorizontalAlignment.Right,
+            horizontalStartPoint: HorizontalAlignment.Right,
+            verticalDirection: VerticalAlignment.Bottom,
+            verticalStartPoint: VerticalAlignment.Bottom,
+        })
+    };
+    ```
+
+    ```html
+    <igx-icon [igxTooltipTarget]="tooltipRef" [hasArrow]="true" [overlaySettings]="overlaySettings">info</igx-icon>
+    <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
+    ```
+
 ### General
 - `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.
 
+- `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.
 
 ## 20.0.6
 ### 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

@@ -8,23 +8,57 @@
     @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
+    $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;
     }
@@ -45,6 +79,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/public_api.ts

@@ -3,6 +3,7 @@ import { IgxTooltipDirective } from './tooltip.directive';
 
 export * from './tooltip.directive';
 export * from './tooltip-target.directive';
+export { ArrowFit, TooltipPositionStrategy } from './tooltip.common';
 
 /* 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();
+    }
+}