chore: use new tooltip in legacy (#9591)

Co-authored-by: taiga-family-bot <[email protected]>

projects/kit/directives/tooltip/tooltip.style.less

@@ -22,7 +22,10 @@
 }
 
 @media (hover: hover) {
-    tui-textfield:hover [tuiTooltip][data-appearance='icon']::after {
+    tui-textfield:hover [tuiTooltip][data-appearance='icon']::after,
+    tui-textarea:hover [tuiTooltip][data-appearance='icon']::after,
+    tui-primitive-textfield:hover [tuiTooltip][data-appearance='icon']::after,
+    tui-input-tag:hover [tuiTooltip][data-appearance='icon']::after {
         color: var(--tui-text-secondary);
     }
 }

projects/legacy/components/tooltip/tooltip.component.ts

@@ -1,12 +1,5 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    inject,
-    Input,
-    ViewChild,
-} from '@angular/core';
-import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
-import {TuiHintHover, TuiHintOptionsDirective} from '@taiga-ui/core/directives/hint';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {TuiHintOptionsDirective} from '@taiga-ui/core/directives/hint';
 
 /**
  * @deprecated: drop in v5.0 use {@link TuiTooltip}
@@ -16,37 +9,13 @@ import {TuiHintHover, TuiHintOptionsDirective} from '@taiga-ui/core/directives/h
     standalone: false,
     selector: 'tui-tooltip',
     templateUrl: './tooltip.template.html',
-    styleUrls: ['./tooltip.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     inputs: ['content', 'direction', 'appearance', 'showDelay', 'hideDelay'],
-    host: {
-        '[attr.data-appearance]': 'computedAppearance',
-        '(click.prevent)': '0',
-        '(mousedown)': 'stopOnMobile($event)',
-    },
 })
 export class TuiTooltipComponent<C = any> extends TuiHintOptionsDirective {
-    private readonly isMobile = inject(TUI_IS_MOBILE);
-
-    @ViewChild(TuiHintHover)
-    protected readonly driver$?: TuiHintHover;
-
     @Input()
     public describeId = '';
 
     @Input()
     public context?: C;
-
-    protected get computedAppearance(): string {
-        return this.appearance || '';
-    }
-
-    protected stopOnMobile(event: MouseEvent): void {
-        if (this.isMobile) {
-            event.preventDefault();
-            event.stopPropagation();
-        } else {
-            this.driver$?.toggle();
-        }
-    }
 }

projects/legacy/components/tooltip/tooltip.module.ts

@@ -1,9 +1,6 @@
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TuiIcon} from '@taiga-ui/core/components/icon';
-import {TuiHint} from '@taiga-ui/core/directives/hint';
-import {TuiWrapperModule} from '@taiga-ui/legacy/directives';
-import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
+import {TuiTooltip} from '@taiga-ui/kit/directives/tooltip';
 
 import {TuiTooltipComponent} from './tooltip.component';
 
@@ -12,7 +9,7 @@ import {TuiTooltipComponent} from './tooltip.component';
  * https://taiga-ui.dev/components/tooltip
  */
 @NgModule({
-    imports: [CommonModule, TuiIcon, PolymorpheusOutlet, ...TuiHint, TuiWrapperModule],
+    imports: [TuiIcon, TuiTooltip],
     declarations: [TuiTooltipComponent],
     exports: [TuiTooltipComponent],
 })

projects/legacy/components/tooltip/tooltip.template.html

@@ -1,21 +1,10 @@
-<span
-    #driver="tuiHintHover"
-    appearance="icon"
+<tui-icon
     automation-id="tui-tooltip__icon"
-    tuiWrapper
-    class="t-tooltip-icon"
-    [hover]="(driver | async) || null"
-    [tuiHint]="content"
-    [tuiHintAppearance]="computedAppearance"
+    [tuiHintAppearance]="appearance || ''"
     [tuiHintContext]="context"
-    [tuiHintDescribe]="describeId"
     [tuiHintDirection]="direction"
     [tuiHintHideDelay]="hideDelay"
     [tuiHintShowDelay]="showDelay"
->
-    <tui-icon
-        *polymorpheusOutlet="icon as src"
-        class="t-icon"
-        [icon]="src"
-    />
-</span>
+    [tuiTooltip]="content"
+    [tuiTooltipDescribe]="describeId"
+/>