diff --git a/projects/addon-charts/components/bar-chart/bar-chart.component.ts b/projects/addon-charts/components/bar-chart/bar-chart.component.ts
index 97e12722a708..fdf6feae4ada 100644
--- a/projects/addon-charts/components/bar-chart/bar-chart.component.ts
+++ b/projects/addon-charts/components/bar-chart/bar-chart.component.ts
@@ -1,5 +1,13 @@
-import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
 import {
+    ChangeDetectionStrategy,
+    Component,
+    Inject,
+    Input,
+    QueryList,
+    ViewChildren,
+} from '@angular/core';
+import {
+    EMPTY_QUERY,
     sum,
     TuiContextWithImplicit,
     tuiDefaultProp,
@@ -7,8 +15,9 @@ import {
     TuiMapper,
     tuiPure,
 } from '@taiga-ui/cdk';
-import {TuiHintMode, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {TuiDriver, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {Observable} from 'rxjs';
 
 function valueAssertion(value: ReadonlyArray<readonly number[]>): boolean {
     const valid = value.every(array => array.length === value[0].length);
@@ -27,6 +36,9 @@ const VALUE_ERROR = `All arrays must be of the same length`;
 export class TuiBarChartComponent {
     private readonly autoIdString: string;
 
+    @ViewChildren(TuiDriver)
+    readonly drivers: QueryList<Observable<boolean>> = EMPTY_QUERY;
+
     @Input()
     @tuiDefaultProp(valueAssertion, VALUE_ERROR)
     value: ReadonlyArray<readonly number[]> = [];
@@ -49,7 +61,7 @@ export class TuiBarChartComponent {
 
     @Input()
     @tuiDefaultProp()
-    hintMode: TuiHintMode | null = null;
+    hintAppearance = ``;
 
     constructor(@Inject(TuiIdService) idService: TuiIdService) {
         this.autoIdString = idService.generate();
@@ -67,13 +79,6 @@ export class TuiBarChartComponent {
         return this.max || this.getMax(this.value, this.collapsed);
     }
 
-    @tuiPure
-    getContentContext(index: number): TuiContextWithImplicit<number> {
-        return {
-            $implicit: index,
-        };
-    }
-
     readonly percentMapper: TuiMapper<readonly number[], number> = (
         set,
         collapsed: boolean,
diff --git a/projects/addon-charts/components/bar-chart/bar-chart.style.less b/projects/addon-charts/components/bar-chart/bar-chart.style.less
index 3cb3f6e68b0d..d555f67a13e1 100644
--- a/projects/addon-charts/components/bar-chart/bar-chart.style.less
+++ b/projects/addon-charts/components/bar-chart/bar-chart.style.less
@@ -15,9 +15,13 @@
     justify-content: center;
     height: 100%;
 
-    &_hoverable._hint_hovered {
-        background-color: rgba(0, 0, 0, 0.05);
+    &_hoverable {
         cursor: pointer;
+
+        &:hover,
+        &.t-wrapper_hovered {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
     }
 }
 
@@ -40,7 +44,3 @@
         box-shadow: 0 0 0 2px var(--tui-focus);
     }
 }
-
-.t-text {
-    white-space: pre-wrap;
-}
diff --git a/projects/addon-charts/components/bar-chart/bar-chart.template.html b/projects/addon-charts/components/bar-chart/bar-chart.template.html
index 4af286298cd1..f54d24060cf2 100644
--- a/projects/addon-charts/components/bar-chart/bar-chart.template.html
+++ b/projects/addon-charts/components/bar-chart/bar-chart.template.html
@@ -3,10 +3,11 @@
     tuiHintDirection="top-left"
     class="t-wrapper"
     [class.t-wrapper_hoverable]="hasHint"
+    [class.t-wrapper_hovered]="drivers.get(index) | async"
     [tuiHintHost]="hintHost"
     [tuiHintId]="getHintId(index)"
     [tuiHint]="getHint(hint)"
-    [tuiHintMode]="hintMode"
+    [tuiHintAppearance]="hintAppearance"
 >
     <div
         class="t-container"
@@ -29,10 +30,9 @@
         #hint="polymorpheus"
         polymorpheus
     >
-        <div
-            *polymorpheusOutlet="hintContent as text; context: getContentContext(index)"
-            class="t-text"
-            [textContent]="text"
-        ></div>
+        <!-- TODO: Consider adding context to Hint directive -->
+        <ng-container *polymorpheusOutlet="hintContent as text; context: {$implicit: index}">
+            {{ text }}
+        </ng-container>
     </ng-template>
 </div>
diff --git a/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts b/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts
index e52f8c94e390..ffdd0a09b9c7 100644
--- a/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts
+++ b/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts
@@ -1,4 +1,5 @@
 import {
+    AfterContentInit,
     ContentChildren,
     Directive,
     ElementRef,
@@ -9,35 +10,28 @@ import {
     QueryList,
     Renderer2,
 } from '@angular/core';
-import {ANIMATION_FRAME} from '@ng-web-apis/common';
 import {TuiLineChartHintContext} from '@taiga-ui/addon-charts/interfaces';
 import {
     EMPTY_QUERY,
     TuiContextWithImplicit,
     tuiDefaultProp,
     TuiDestroyService,
+    TuiHoveredService,
     tuiPure,
     tuiZonefree,
 } from '@taiga-ui/cdk';
-import {HINT_HOVERED_CLASS, TuiPoint} from '@taiga-ui/core';
+import {TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {Observable} from 'rxjs';
-import {
-    distinctUntilChanged,
-    filter,
-    map,
-    startWith,
-    takeUntil,
-    throttleTime,
-} from 'rxjs/operators';
+import {combineLatest, Observable} from 'rxjs';
+import {distinctUntilChanged, filter, map, startWith, takeUntil} from 'rxjs/operators';
 
 import {TuiLineChartComponent} from './line-chart.component';
 
 @Directive({
     selector: `[tuiLineChartHint]`,
-    providers: [TuiDestroyService],
+    providers: [TuiDestroyService, TuiHoveredService],
 })
-export class TuiLineChartHintDirective {
+export class TuiLineChartHintDirective implements AfterContentInit {
     @ContentChildren(forwardRef(() => TuiLineChartComponent))
     private readonly charts: QueryList<TuiLineChartComponent> = EMPTY_QUERY;
 
@@ -50,20 +44,18 @@ export class TuiLineChartHintDirective {
 
     constructor(
         @Inject(Renderer2) private readonly renderer: Renderer2,
-        @Inject(TuiDestroyService) destroy$: TuiDestroyService,
-        @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,
-        @Inject(NgZone) ngZone: NgZone,
-        @Inject(ANIMATION_FRAME) animationFrame$: Observable<number>,
-    ) {
-        animationFrame$
+        @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
+        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(TuiHoveredService) private readonly hovered$: Observable<boolean>,
+    ) {}
+
+    ngAfterContentInit(): void {
+        combineLatest([tuiLineChartDrivers(this.charts), this.hovered$])
             .pipe(
-                throttleTime(200),
-                map(() => !!nativeElement.querySelector(`.${HINT_HOVERED_CLASS}`)),
-                startWith(false),
-                distinctUntilChanged(),
-                filter(v => !v),
-                tuiZonefree(ngZone),
-                takeUntil(destroy$),
+                map(([drivers, hovered]) => !drivers && !hovered),
+                filter(Boolean),
+                tuiZonefree(this.ngZone),
+                takeUntil(this.destroy$),
             )
             .subscribe(() => {
                 this.charts.forEach(chart => chart.onHovered(NaN));
@@ -104,3 +96,16 @@ export class TuiLineChartHintDirective {
         };
     }
 }
+
+export function tuiLineChartDrivers(
+    charts: QueryList<{drivers: QueryList<Observable<boolean>>}>,
+): Observable<boolean> {
+    return combineLatest(
+        charts
+            .map(({drivers}) => drivers.map(driver => driver.pipe(startWith(false))))
+            .reduce((acc, drivers) => acc.concat(drivers), []),
+    ).pipe(
+        map(values => values.some(Boolean)),
+        distinctUntilChanged(),
+    );
+}
diff --git a/projects/addon-charts/components/line-chart/line-chart.component.ts b/projects/addon-charts/components/line-chart/line-chart.component.ts
index 16ea1f8f4a02..02ed152daf67 100644
--- a/projects/addon-charts/components/line-chart/line-chart.component.ts
+++ b/projects/addon-charts/components/line-chart/line-chart.component.ts
@@ -7,10 +7,13 @@ import {
     Input,
     NgZone,
     Optional,
+    QueryList,
+    ViewChildren,
 } from '@angular/core';
 import {TuiLineChartHintContext} from '@taiga-ui/addon-charts/interfaces';
 import {tuiDraw} from '@taiga-ui/addon-charts/utils';
 import {
+    EMPTY_QUERY,
     tuiDefaultProp,
     TuiIdService,
     tuiInRange,
@@ -18,7 +21,7 @@ import {
     TuiStringHandler,
     tuiZoneOptimized,
 } from '@taiga-ui/cdk';
-import {TuiPoint} from '@taiga-ui/core';
+import {TuiDriver, TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable, Subject} from 'rxjs';
 import {distinctUntilChanged} from 'rxjs/operators';
@@ -36,6 +39,9 @@ export class TuiLineChartComponent {
 
     private readonly autoIdString: string;
 
+    @ViewChildren(TuiDriver)
+    readonly drivers: QueryList<Observable<boolean>> = EMPTY_QUERY;
+
     @Input(`value`)
     @tuiDefaultProp()
     set valueSetter(value: readonly TuiPoint[]) {
diff --git a/projects/addon-charts/components/line-chart/line-chart.style.less b/projects/addon-charts/components/line-chart/line-chart.style.less
index e50dbb414923..50513de0beb1 100644
--- a/projects/addon-charts/components/line-chart/line-chart.style.less
+++ b/projects/addon-charts/components/line-chart/line-chart.style.less
@@ -44,7 +44,7 @@
     &:focus,
     .t-column_hovered &,
     .t-column:hover &,
-    .t-column._hint_hovered & {
+    .t-column_hint_hovered & {
         opacity: 1;
     }
 }
@@ -69,18 +69,14 @@
 
     :host[style^='z-index: 0'] .t-column_hovered &,
     :host:not([style]) .t-column:hover &,
-    :host:not([style]) .t-column._hint_hovered &,
+    :host:not([style]) .t-column_hint_hovered &,
     :host[style^='z-index: 0'] .t-column_hovered + &,
     :host:not([style]) .t-column:hover + &,
-    :host:not([style]) .t-column._hint_hovered + & {
+    :host:not([style]) .t-column_hint_hovered + & {
         opacity: 1;
     }
 }
 
-.t-text {
-    white-space: pre-wrap;
-}
-
 .t-hint {
     .shadow();
     position: absolute;
diff --git a/projects/addon-charts/components/line-chart/line-chart.template.html b/projects/addon-charts/components/line-chart/line-chart.template.html
index 1e0560e9e640..8860e35dba78 100644
--- a/projects/addon-charts/components/line-chart/line-chart.template.html
+++ b/projects/addon-charts/components/line-chart/line-chart.template.html
@@ -53,9 +53,10 @@
         <ng-container *ngFor="let point of value; let index = index">
             <div
                 *ngIf="value.length > 1 || dots"
-                tuiHintDirection="top-left"
+                tuiHintDirection="top"
                 class="t-column"
                 [class.t-column_hovered]="hovered === index"
+                [class.t-column_hint_hovered]="drivers.get(index) | async"
                 [tuiHintHost]="hintHost"
                 [tuiHint]="hintDirective || hintContent ? hint : ''"
                 [tuiHintId]="getHintId(index)"
@@ -82,20 +83,21 @@
                 [style.bottom.%]="getBottom(point[1])"
             ></div>
             <ng-template #hint>
+                <!-- TODO: Consider adding context to Hint directive -->
                 <ng-container *ngIf="hintDirective; else single">
-                    <div
+                    <ng-container
                         *polymorpheusOutlet="hintDirective.hint as text; context: getContentContext(point, index)"
-                        class="t-text"
-                        [textContent]="text"
-                    ></div>
+                    >
+                        {{ text }}
+                    </ng-container>
                 </ng-container>
                 <ng-template #single>
                     <!-- TODO: Polymorpheus fix type -->
-                    <div
+                    <ng-container
                         *polymorpheusOutlet="$any(hintContent) as text; context: {$implicit: point, index: index}"
-                        class="t-text"
-                        [textContent]="text"
-                    ></div>
+                    >
+                        {{ text }}
+                    </ng-container>
                 </ng-template>
             </ng-template>
         </ng-container>
diff --git a/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts b/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts
index b9fcaeda7364..01b3b99342e2 100644
--- a/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts
+++ b/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts
@@ -1,42 +1,37 @@
 import {
+    AfterContentInit,
     ContentChildren,
     Directive,
-    ElementRef,
     forwardRef,
     Inject,
     Input,
     NgZone,
     QueryList,
 } from '@angular/core';
-import {ANIMATION_FRAME} from '@ng-web-apis/common';
+import {tuiLineChartDrivers} from '@taiga-ui/addon-charts/components/line-chart';
 import {
     EMPTY_QUERY,
     TuiContextWithImplicit,
     TuiDay,
     tuiDefaultProp,
     TuiDestroyService,
+    TuiHoveredService,
     tuiPure,
     tuiZonefree,
 } from '@taiga-ui/cdk';
-import {HINT_HOVERED_CLASS, TuiPoint} from '@taiga-ui/core';
+import {TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {Observable} from 'rxjs';
-import {
-    distinctUntilChanged,
-    filter,
-    map,
-    startWith,
-    takeUntil,
-    throttleTime,
-} from 'rxjs/operators';
+import {combineLatest, Observable} from 'rxjs';
+import {filter, map, takeUntil} from 'rxjs/operators';
 
 import {TuiLineDaysChartComponent} from './line-days-chart.component';
 
+// TODO: Consider extending TuiLineChartHintDirective
 @Directive({
     selector: `[tuiLineChartHint]`,
-    providers: [TuiDestroyService],
+    providers: [TuiDestroyService, TuiHoveredService],
 })
-export class TuiLineDaysChartHintDirective {
+export class TuiLineDaysChartHintDirective implements AfterContentInit {
     @ContentChildren(forwardRef(() => TuiLineDaysChartComponent))
     private readonly charts: QueryList<TuiLineDaysChartComponent> = EMPTY_QUERY;
 
@@ -45,23 +40,21 @@ export class TuiLineDaysChartHintDirective {
     hint: PolymorpheusContent<TuiContextWithImplicit<readonly TuiPoint[]>> = ``;
 
     constructor(
-        @Inject(TuiDestroyService) destroy$: TuiDestroyService,
-        @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,
-        @Inject(NgZone) ngZone: NgZone,
-        @Inject(ANIMATION_FRAME) animationFrame$: Observable<number>,
-    ) {
-        animationFrame$
+        @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
+        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(TuiHoveredService) private readonly hovered$: Observable<boolean>,
+    ) {}
+
+    ngAfterContentInit(): void {
+        combineLatest([tuiLineChartDrivers(this.charts), this.hovered$])
             .pipe(
-                throttleTime(200),
-                map(() => !!nativeElement.querySelector(`.${HINT_HOVERED_CLASS}`)),
-                startWith(false),
-                distinctUntilChanged(),
-                tuiZonefree(ngZone),
-                filter(v => !v),
-                takeUntil(destroy$),
+                map(([drivers, hovered]) => !drivers && !hovered),
+                filter(Boolean),
+                tuiZonefree(this.ngZone),
+                takeUntil(this.destroy$),
             )
             .subscribe(() => {
-                this.charts.forEach(chart => chart.onHovered(null));
+                this.charts.forEach(chart => chart.onHovered(NaN));
             });
     }
 
diff --git a/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts b/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts
index 095245897c43..0dfc55710faf 100644
--- a/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts
+++ b/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts
@@ -20,12 +20,14 @@ import {
     TuiContextWithImplicit,
     TuiDay,
     tuiDefaultProp,
+    tuiIsNumber,
     TuiMonth,
     tuiPure,
     TuiStringHandler,
 } from '@taiga-ui/cdk';
-import {TuiPoint} from '@taiga-ui/core';
+import {TuiDriver, TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {Observable} from 'rxjs';
 
 import {TuiLineDaysChartHintDirective} from './line-days-chart-hint.directive';
 
@@ -47,6 +49,9 @@ export class TuiLineDaysChartComponent {
     @ViewChildren(TuiLineChartComponent)
     private readonly charts: QueryList<TuiLineChartComponent> = EMPTY_QUERY;
 
+    @ViewChildren(TuiDriver)
+    readonly drivers: QueryList<Observable<boolean>> = EMPTY_QUERY;
+
     @Input(`value`)
     @tuiDefaultProp()
     set valueSetter(value: ReadonlyArray<[TuiDay, number]>) {
@@ -143,8 +148,8 @@ export class TuiLineDaysChartComponent {
         return index - offset;
     }
 
-    onHovered(day: TuiDay | null): void {
-        if (!day) {
+    onHovered(day: TuiDay | number): void {
+        if (tuiIsNumber(day)) {
             this.charts.forEach(chart => chart.onHovered(NaN));
 
             return;
diff --git a/projects/addon-charts/components/pie-chart/pie-chart.component.ts b/projects/addon-charts/components/pie-chart/pie-chart.component.ts
index 160cdf5788e8..ca28a4301288 100644
--- a/projects/addon-charts/components/pie-chart/pie-chart.component.ts
+++ b/projects/addon-charts/components/pie-chart/pie-chart.component.ts
@@ -16,7 +16,7 @@ import {
     tuiPure,
     tuiSum,
 } from '@taiga-ui/cdk';
-import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
+import {tuiHintOptionsProvider, TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 const RADII = {
@@ -39,6 +39,7 @@ const TRANSFORM = {
     templateUrl: `./pie-chart.template.html`,
     styleUrls: [`./pie-chart.style.less`],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [tuiHintOptionsProvider({showDelay: 0, hideDelay: 0})],
 })
 export class TuiPieChartComponent {
     private readonly autoIdString: string;
diff --git a/projects/addon-charts/components/pie-chart/pie-chart.module.ts b/projects/addon-charts/components/pie-chart/pie-chart.module.ts
index 35c8bd72daad..7e993e107837 100644
--- a/projects/addon-charts/components/pie-chart/pie-chart.module.ts
+++ b/projects/addon-charts/components/pie-chart/pie-chart.module.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TuiHoveredModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
-import {TuiPointerHintModule} from '@taiga-ui/core';
+import {TuiHintModule} from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiPieChartComponent} from './pie-chart.component';
@@ -13,7 +13,7 @@ import {TuiPieChartDirective} from './pie-chart.directive';
         TuiRepeatTimesModule,
         TuiHoveredModule,
         PolymorpheusModule,
-        TuiPointerHintModule,
+        TuiHintModule,
     ],
     declarations: [TuiPieChartComponent, TuiPieChartDirective],
     exports: [TuiPieChartComponent],
diff --git a/projects/addon-charts/components/pie-chart/pie-chart.style.less b/projects/addon-charts/components/pie-chart/pie-chart.style.less
index fbbab72754e7..99fb91861ebf 100644
--- a/projects/addon-charts/components/pie-chart/pie-chart.style.less
+++ b/projects/addon-charts/components/pie-chart/pie-chart.style.less
@@ -54,7 +54,3 @@
 .t-placeholder {
     fill: var(--tui-base-03);
 }
-
-.t-text {
-    white-space: pre-wrap;
-}
diff --git a/projects/addon-charts/components/pie-chart/pie-chart.template.html b/projects/addon-charts/components/pie-chart/pie-chart.template.html
index 28a616ce1ddc..2979a7010161 100644
--- a/projects/addon-charts/components/pie-chart/pie-chart.template.html
+++ b/projects/addon-charts/components/pie-chart/pie-chart.template.html
@@ -33,14 +33,15 @@
             *tuiRepeatTimes="let index of segments.length"
             fill="currentColor"
             automation-id="tui-pie-chart__segment"
-            tuiHintMode="onDark"
+            tuiHintPointer
+            tuiHintAppearance="onDark"
             tuiHintDirection="top-right"
             d=""
             class="t-segment"
             [attr.transform]="getTransform(index)"
             [style.color]="getColor(index)"
             [tuiPieChart]="segments[index]"
-            [tuiPointerHint]="getHint(hint)"
+            [tuiHint]="getHint(hint)"
             (tuiHoveredChange)="onHovered($event, index)"
         >
             <ng-template #hint>
@@ -56,9 +57,8 @@
     #template
     let-index
 >
-    <div
-        *polymorpheusOutlet="hintContent as text; context: {$implicit: index}"
-        class="t-text"
-        [textContent]="text"
-    ></div>
+    <!-- TODO: Consider adding context to Hint directive -->
+    <ng-container *polymorpheusOutlet="hintContent as text; context: {$implicit: index}">
+        {{ text }}
+    </ng-container>
 </ng-template>
diff --git a/projects/addon-preview/components/preview/preview.module.ts b/projects/addon-preview/components/preview/preview.module.ts
index 45b53419b6c5..dd11b13527f8 100644
--- a/projects/addon-preview/components/preview/preview.module.ts
+++ b/projects/addon-preview/components/preview/preview.module.ts
@@ -8,7 +8,6 @@ import {
     TuiButtonModule,
     TuiHintModule,
     TuiLoaderModule,
-    TuiManualHintModule,
     TuiSvgModule,
 } from '@taiga-ui/core';
 import {TuiSliderModule} from '@taiga-ui/kit';
@@ -31,7 +30,6 @@ import {TuiPreviewZoomComponent} from './zoom/preview-zoom.component';
         TuiSliderModule,
         TuiHintModule,
         TuiDragModule,
-        TuiManualHintModule,
         TuiResizeModule,
         TuiSvgModule,
         TuiLoaderModule,
diff --git a/projects/addon-preview/components/preview/preview.template.html b/projects/addon-preview/components/preview/preview.template.html
index 108712d15140..4f230d82498e 100644
--- a/projects/addon-preview/components/preview/preview.template.html
+++ b/projects/addon-preview/components/preview/preview.template.html
@@ -38,7 +38,7 @@
             icon="tuiIconRotate"
             tuiHintId="Rotate"
             tuiHintDirection="top-right"
-            tuiHintMode="onDark"
+            tuiHintAppearance="onDark"
             class="t-rotate-button"
             [tuiHint]="texts.rotate"
             (click)="rotate()"
diff --git a/projects/addon-preview/components/preview/zoom/preview-zoom.template.html b/projects/addon-preview/components/preview/zoom/preview-zoom.template.html
index cefaf4a96ecf..b7ccb23da3bf 100644
--- a/projects/addon-preview/components/preview/zoom/preview-zoom.template.html
+++ b/projects/addon-preview/components/preview/zoom/preview-zoom.template.html
@@ -11,10 +11,10 @@
         ></button>
         <label tuiSliderThumbLabel>
             <div
-                tuiHintMode="onDark"
+                tuiHintAppearance="onDark"
                 tuiHintDirection="top-right"
-                [tuiManualHint]="hint"
-                [tuiManualHintShow]="!!(hintShow$ | async)"
+                [tuiHint]="hint"
+                [tuiHintManual]="!!(hintShow$ | async)"
             ></div>
 
             <ng-template #hint>
@@ -49,7 +49,7 @@
         icon="tuiIconCollapse"
         tuiHintId="Collapse"
         tuiHintDirection="top-right"
-        tuiHintMode="onDark"
+        tuiHintAppearance="onDark"
         class="t-reset-button"
         [tuiHint]="texts.reset"
         [class.t-invisible]="!collapseVisible"
diff --git a/projects/core/abstract/abstract-driver.directive.ts b/projects/core/abstract/abstract-driver.directive.ts
new file mode 100644
index 000000000000..fd64ccc40f48
--- /dev/null
+++ b/projects/core/abstract/abstract-driver.directive.ts
@@ -0,0 +1,20 @@
+import {Directive, Inject, Self} from '@angular/core';
+import {TuiDestroyService} from '@taiga-ui/cdk';
+import {Observable} from 'rxjs';
+import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
+
+import {TuiDriver} from './driver';
+import {TuiVehicle} from './vehicle';
+
+@Directive()
+export class AbstractTuiDriverDirective {
+    constructor(
+        @Self() @Inject(TuiDestroyService) destroy$: Observable<unknown>,
+        @Inject(TuiDriver) driver$: Observable<boolean>,
+        @Inject(TuiVehicle) vehicle: TuiVehicle,
+    ) {
+        driver$.pipe(distinctUntilChanged(), takeUntil(destroy$)).subscribe(value => {
+            vehicle.toggle(value);
+        });
+    }
+}
diff --git a/projects/core/abstract/abstract-hint-options.ts b/projects/core/abstract/abstract-hint-options.ts
deleted file mode 100644
index 6ae25c5330f7..000000000000
--- a/projects/core/abstract/abstract-hint-options.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {TuiDirection, TuiHintMode} from '@taiga-ui/core/types';
-
-export interface TuiAbstractHintOptions {
-    readonly mode: TuiHintMode | null;
-    readonly direction: TuiDirection;
-}
-
-/** Default values for abstract hint options */
-export const TUI_ABSTRACT_HINT_DEFAULT_OPTIONS: TuiAbstractHintOptions = {
-    mode: null,
-    direction: `bottom-left`,
-};
diff --git a/projects/core/abstract/abstract-hint.ts b/projects/core/abstract/abstract-hint.ts
deleted file mode 100644
index dd292d2c6cdf..000000000000
--- a/projects/core/abstract/abstract-hint.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {Directive, ElementRef, Input, OnDestroy} from '@angular/core';
-import {TuiActiveZoneDirective, tuiDefaultProp} from '@taiga-ui/cdk';
-import {TuiHintService} from '@taiga-ui/core/services';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-
-import {TuiAbstractHintOptions} from './abstract-hint-options';
-
-@Directive()
-export abstract class AbstractTuiHint implements OnDestroy {
-    @Input(`tuiHintMode`)
-    @tuiDefaultProp()
-    mode: TuiAbstractHintOptions['mode'] = this.options.mode;
-
-    @Input(`tuiHintDirection`)
-    @tuiDefaultProp()
-    direction: TuiAbstractHintOptions['direction'] = this.options.direction;
-
-    content: PolymorpheusContent = ``;
-
-    protected constructor(
-        protected readonly elementRef: ElementRef<HTMLElement>,
-        protected readonly hintService: TuiHintService,
-        readonly activeZone: TuiActiveZoneDirective | null,
-        protected readonly options: TuiAbstractHintOptions,
-    ) {}
-
-    abstract getElementClientRect(): ClientRect;
-
-    ngOnDestroy(): void {
-        this.hideTooltip();
-    }
-
-    protected showTooltip(): void {
-        this.hintService.add(this);
-    }
-
-    protected hideTooltip(): void {
-        this.hintService.remove(this);
-    }
-}
diff --git a/projects/core/abstract/driver.ts b/projects/core/abstract/driver.ts
new file mode 100644
index 000000000000..69f81fc232cc
--- /dev/null
+++ b/projects/core/abstract/driver.ts
@@ -0,0 +1,11 @@
+import {ExistingProvider, Type} from '@angular/core';
+import {Observable} from 'rxjs';
+
+export abstract class TuiDriver extends Observable<boolean> {}
+
+export function tuiAsDriver(useExisting: Type<TuiDriver>): ExistingProvider {
+    return {
+        provide: TuiDriver,
+        useExisting,
+    };
+}
diff --git a/projects/core/abstract/index.ts b/projects/core/abstract/index.ts
index ed353f0b0695..99435ab1d5cb 100644
--- a/projects/core/abstract/index.ts
+++ b/projects/core/abstract/index.ts
@@ -1,4 +1,7 @@
+export * from './abstract-driver.directive';
 export * from './abstract-dropdown';
-export * from './abstract-hint';
-export * from './abstract-hint-options';
 export * from './abstract-textfield-host';
+export * from './driver';
+export * from './position-accessor';
+export * from './rect-accessor';
+export * from './vehicle';
diff --git a/projects/core/abstract/position-accessor.ts b/projects/core/abstract/position-accessor.ts
new file mode 100644
index 000000000000..9483907f61e2
--- /dev/null
+++ b/projects/core/abstract/position-accessor.ts
@@ -0,0 +1,15 @@
+import {ExistingProvider, Type} from '@angular/core';
+import {TuiPoint} from '@taiga-ui/core/types';
+
+export abstract class TuiPositionAccessor {
+    abstract getPosition(rect: ClientRect): TuiPoint;
+}
+
+export function tuiAsPositionAccessor(
+    useExisting: Type<TuiPositionAccessor>,
+): ExistingProvider {
+    return {
+        provide: TuiPositionAccessor,
+        useExisting,
+    };
+}
diff --git a/projects/core/abstract/rect-accessor.ts b/projects/core/abstract/rect-accessor.ts
new file mode 100644
index 000000000000..16076f09be28
--- /dev/null
+++ b/projects/core/abstract/rect-accessor.ts
@@ -0,0 +1,12 @@
+import {ExistingProvider, Type} from '@angular/core';
+
+export abstract class TuiRectAccessor {
+    abstract getClientRect(): ClientRect;
+}
+
+export function tuiAsRectAccessor(useExisting: Type<TuiRectAccessor>): ExistingProvider {
+    return {
+        provide: TuiRectAccessor,
+        useExisting,
+    };
+}
diff --git a/projects/core/abstract/vehicle.ts b/projects/core/abstract/vehicle.ts
new file mode 100644
index 000000000000..0ab17fbcac2d
--- /dev/null
+++ b/projects/core/abstract/vehicle.ts
@@ -0,0 +1,12 @@
+import {ExistingProvider, Type} from '@angular/core';
+
+export abstract class TuiVehicle {
+    abstract toggle(value: boolean): void;
+}
+
+export function tuiAsVehicle(useExisting: Type<TuiVehicle>): ExistingProvider {
+    return {
+        provide: TuiVehicle,
+        useExisting,
+    };
+}
diff --git a/projects/core/components/hints-host/hint-box/hint-box.component.ts b/projects/core/components/hints-host/hint-box/hint-box.component.ts
deleted file mode 100644
index e28a7def0724..000000000000
--- a/projects/core/components/hints-host/hint-box/hint-box.component.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import {AnimationOptions} from '@angular/animations';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    forwardRef,
-    HostBinding,
-    Inject,
-    NgZone,
-    ViewChild,
-} from '@angular/core';
-import {ANIMATION_FRAME, WINDOW} from '@ng-web-apis/common';
-import {
-    TuiContextWithImplicit,
-    TuiDestroyService,
-    tuiPure,
-    tuiPx,
-    tuiZonefree,
-} from '@taiga-ui/cdk';
-import {AbstractTuiHint} from '@taiga-ui/core/abstract';
-import {tuiFadeIn} from '@taiga-ui/core/animations';
-import {TuiHintDirective} from '@taiga-ui/core/directives';
-import {TuiPointerHintDirective} from '@taiga-ui/core/directives/pointer-hint';
-import {TuiMedia} from '@taiga-ui/core/interfaces';
-import {TUI_ANIMATION_OPTIONS, TUI_MEDIA} from '@taiga-ui/core/tokens';
-import {TuiDirection, TuiHintMode} from '@taiga-ui/core/types';
-import {tuiIsMobile} from '@taiga-ui/core/utils';
-import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
-import {Observable} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
-
-import {TuiHintsHostComponent} from '../hints-host.component';
-
-const SPACE = 8;
-const BORDER_WIDTH = 1;
-const LEFT_PADDING = 16;
-const TOP_PADDING = 12;
-const ARROW_SIZE = 8;
-const ARROW_OFFSET = 16;
-const ARROWHEAD_OFFSET = ARROW_OFFSET + (ARROW_SIZE * Math.sqrt(2)) / 2;
-const reverseDirectionsVertical: {[key in TuiDirection]: TuiDirection} = {
-    'top-left': `bottom-left`,
-    'top-right': `bottom-right`,
-    'bottom-left': `top-left`,
-    'bottom-right': `top-right`,
-    left: `right`,
-    right: `left`,
-    'top-middle': `bottom-middle`,
-    'bottom-middle': `top-middle`,
-};
-const reverseDirectionsHorizontal: {[key in TuiDirection]: TuiDirection} = {
-    'top-left': `top-right`,
-    'top-right': `top-left`,
-    'bottom-left': `bottom-right`,
-    'bottom-right': `bottom-left`,
-    left: `right`,
-    right: `left`,
-    'top-middle': `top-middle`,
-    'bottom-middle': `bottom-middle`,
-};
-
-// TODO: consider abstracting UI and move to CDK, split hint and overflow
-@Component({
-    selector: `tui-hint-box[hint]`,
-    templateUrl: `./hint-box.template.html`,
-    styleUrls: [`./hint-box.style.less`],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [TuiDestroyService],
-    animations: [tuiFadeIn],
-})
-export class TuiHintBoxComponent {
-    @ViewChild(`arrow`)
-    private readonly arrow?: ElementRef<HTMLElement>;
-
-    @HostBinding(`@tuiFadeIn`)
-    readonly animation = {value: ``, ...this.options} as const;
-
-    constructor(
-        @Inject(ANIMATION_FRAME) animationFrame$: Observable<number>,
-        @Inject(TuiDestroyService) destroy$: Observable<void>,
-        @Inject(NgZone) ngZone: NgZone,
-        @Inject(TUI_ANIMATION_OPTIONS) private readonly options: AnimationOptions,
-        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
-        @Inject(WINDOW) private readonly windowRef: Window,
-        @Inject(TUI_MEDIA) private readonly media: TuiMedia,
-        @Inject(forwardRef(() => TuiHintsHostComponent))
-        private readonly hintsHost: TuiHintsHostComponent,
-        @Inject(POLYMORPHEUS_CONTEXT)
-        private readonly context: TuiContextWithImplicit<AbstractTuiHint>,
-    ) {
-        animationFrame$
-            .pipe(tuiZonefree(ngZone), takeUntil(destroy$))
-            .subscribe(() => this.calculatePosition());
-    }
-
-    get hint(): AbstractTuiHint {
-        return this.context.$implicit;
-    }
-
-    @tuiPure
-    @HostBinding(`class._untouchable`)
-    get isUntouchable(): boolean {
-        return this.hint instanceof TuiPointerHintDirective;
-    }
-
-    @HostBinding(`attr.data-mode`)
-    get mode(): TuiHintMode | null {
-        return this.hint.mode;
-    }
-
-    get isMobile(): boolean {
-        return tuiIsMobile(this.windowRef, this.media);
-    }
-
-    onHovered(hovered: boolean): void {
-        if (this.hint instanceof TuiHintDirective) {
-            this.hint.componentHovered$.next(hovered);
-        }
-    }
-
-    /**
-     * Calculates wrapper position.
-     * Styles are set directly to avoid visual shake of element
-     */
-    private calculatePosition(): void {
-        if (this.mode !== `overflow`) {
-            this.calculateCoordinates();
-        } else {
-            this.setOverflowStyles();
-        }
-    }
-
-    private calculateCoordinates(): void {
-        if (this.isMobile) {
-            this.calculateMobileCoordinates();
-
-            return;
-        }
-
-        const hostRect = this.hint.getElementClientRect();
-        const portalRect = this.hintsHost.clientRect;
-        const tooltip = this.elementRef.nativeElement;
-        const {style} = tooltip;
-        const tooltipRect = tooltip.getBoundingClientRect();
-        const isHostLong = hostRect.width > ARROWHEAD_OFFSET * 2;
-        const directions: TuiDirection[] = [
-            `left`,
-            `right`,
-            `bottom-left`,
-            `bottom-right`,
-            `bottom-middle`,
-            `top-left`,
-            `top-right`,
-            `top-middle`,
-        ];
-
-        let top = 0;
-        let left = 0;
-        let {direction} = this.hint;
-
-        const horizontalTop =
-            hostRect.top + hostRect.height / 2 - tooltipRect.height / 2 - portalRect.top;
-        const horizontalLeft =
-            hostRect.left - tooltipRect.width - SPACE - portalRect.left;
-        const horizontalRight = hostRect.left + hostRect.width + SPACE - portalRect.left;
-        const verticalBottom = hostRect.bottom + SPACE - portalRect.top;
-        const verticalTop = hostRect.top - tooltipRect.height - SPACE - portalRect.top;
-        const verticalRight = isHostLong
-            ? hostRect.left - portalRect.left
-            : hostRect.left + hostRect.width / 2 - ARROWHEAD_OFFSET - portalRect.left;
-        const verticalLeft = isHostLong
-            ? hostRect.left - tooltipRect.width + hostRect.width - portalRect.left
-            : hostRect.left -
-              tooltipRect.width +
-              hostRect.width / 2 +
-              ARROWHEAD_OFFSET -
-              portalRect.left;
-        const verticalMiddle =
-            hostRect.left - tooltipRect.width / 2 + hostRect.width / 2 - portalRect.left;
-
-        directions.splice(directions.indexOf(direction), 1);
-
-        // eslint-disable-next-line no-constant-condition
-        while (true) {
-            switch (direction) {
-                case `left`:
-                    top = horizontalTop;
-                    left = horizontalLeft;
-                    break;
-                case `right`:
-                    top = horizontalTop;
-                    left = horizontalRight;
-                    break;
-                case `top-right`:
-                    top = verticalTop;
-                    left = verticalRight;
-                    break;
-                case `top-left`:
-                    top = verticalTop;
-                    left = verticalLeft;
-                    break;
-                case `bottom-right`:
-                    top = verticalBottom;
-                    left = verticalRight;
-                    break;
-                case `bottom-left`:
-                    top = verticalBottom;
-                    left = verticalLeft;
-                    break;
-                case `bottom-middle`:
-                    top = verticalBottom;
-                    left = verticalMiddle;
-                    break;
-                case `top-middle`:
-                    top = verticalTop;
-                    left = verticalMiddle;
-                    break;
-            }
-
-            const verticalFit =
-                top + portalRect.top > SPACE &&
-                top + tooltipRect.height + SPACE + portalRect.top <
-                    this.windowRef.innerHeight;
-            const horizontalFit =
-                left > SPACE &&
-                left + tooltipRect.width + SPACE + portalRect.left < portalRect.width;
-
-            if (directions.length === 0 || (verticalFit && horizontalFit)) {
-                break;
-            }
-
-            direction = verticalFit
-                ? reverseDirectionsHorizontal[direction]
-                : reverseDirectionsVertical[direction];
-            direction =
-                directions.splice(directions.indexOf(direction), 1)[0] || direction;
-        }
-
-        style.top = tuiPx(top);
-        style.left = tuiPx(left);
-
-        tooltip.setAttribute(`data-tui-host-direction`, direction);
-    }
-
-    private calculateMobileCoordinates(): void {
-        const hostRect = this.hint.getElementClientRect();
-        const portalRect = this.hintsHost.clientRect;
-        const tooltip = this.elementRef.nativeElement;
-        const {style} = tooltip;
-        const tooltipRect = tooltip.getBoundingClientRect();
-        const verticalTop = hostRect.top - tooltipRect.height - SPACE - portalRect.top;
-        const verticalBottom = hostRect.bottom + SPACE - portalRect.top;
-        const verticalTopFit =
-            verticalTop + portalRect.top > SPACE &&
-            hostRect.top < this.windowRef.innerHeight;
-        const verticalBottomFit =
-            hostRect.bottom > 0 &&
-            hostRect.bottom + 2 * SPACE + tooltipRect.height < this.windowRef.innerHeight;
-        const direction =
-            (this.hint.direction.includes(`top`) && verticalTopFit) || !verticalBottomFit
-                ? `top`
-                : `bottom`;
-        const attemptedLeft =
-            portalRect.left + hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
-        const left = Math.max(
-            attemptedLeft + tooltipRect.width + SPACE > portalRect.right
-                ? portalRect.right - SPACE - tooltipRect.width
-                : attemptedLeft,
-            SPACE * 2,
-        );
-
-        style.left = tuiPx(left);
-        style.top = direction === `top` ? tuiPx(verticalTop) : tuiPx(verticalBottom);
-
-        if (this.arrow) {
-            this.arrow.nativeElement.style.left = tuiPx(
-                hostRect.left <= SPACE * 2 && hostRect.width > ARROW_OFFSET * 2
-                    ? ARROW_OFFSET
-                    : hostRect.left + hostRect.width / 2 - left - ARROW_SIZE / 2,
-            );
-        }
-
-        tooltip.setAttribute(`data-tui-host-direction`, direction);
-    }
-
-    private setOverflowStyles(): void {
-        const hostRect = this.hint.getElementClientRect();
-        const {style} = this.elementRef.nativeElement;
-
-        style.top = tuiPx(hostRect.top - window.innerHeight - TOP_PADDING - BORDER_WIDTH);
-        style.left = tuiPx(hostRect.left - LEFT_PADDING - BORDER_WIDTH);
-        style.width = tuiPx(hostRect.width + LEFT_PADDING * 2 + BORDER_WIDTH * 2);
-    }
-}
diff --git a/projects/core/components/hints-host/hint-box/hint-box.module.ts b/projects/core/components/hints-host/hint-box/hint-box.module.ts
deleted file mode 100644
index ad8fccec03ac..000000000000
--- a/projects/core/components/hints-host/hint-box/hint-box.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {TuiHoveredModule} from '@taiga-ui/cdk';
-import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
-
-import {TuiHintBoxComponent} from './hint-box.component';
-
-@NgModule({
-    imports: [CommonModule, PolymorpheusModule, TuiHoveredModule],
-    declarations: [TuiHintBoxComponent],
-    exports: [TuiHintBoxComponent],
-    entryComponents: [TuiHintBoxComponent],
-})
-export class TuiHintBoxModule {}
diff --git a/projects/core/components/hints-host/hint-box/hint-box.style.less b/projects/core/components/hints-host/hint-box/hint-box.style.less
deleted file mode 100644
index a269350b670f..000000000000
--- a/projects/core/components/hints-host/hint-box/hint-box.style.less
+++ /dev/null
@@ -1,145 +0,0 @@
-@import '../../../styles/taiga-ui-local.less';
-
-@arrowSize: 0.5rem;
-@arrowOffset: 0.875rem;
-@arrowCompensation: 0.2rem; // 8px * 1.4 - 8px ATTENTION
-
-:host {
-    position: absolute;
-    top: 0;
-    left: 0;
-    max-width: 18rem;
-    min-height: var(--tui-height-m);
-    background: var(--tui-primary);
-    border-radius: var(--tui-radius-l);
-    color: var(--tui-primary-text);
-    box-sizing: border-box;
-
-    &:not([data-mode='overflow']):before,
-    .t-arrow {
-        content: '';
-        position: absolute;
-        width: @arrowSize;
-        height: @arrowSize;
-        border-radius: 0.125rem;
-        box-sizing: border-box;
-        background-color: inherit;
-        transform: rotate(45deg);
-    }
-
-    &[data-tui-host-direction='top'] .t-arrow {
-        bottom: (-@arrowSize / 2);
-    }
-
-    &[data-tui-host-direction='bottom'] .t-arrow {
-        top: (-@arrowSize / 2);
-    }
-
-    &[data-tui-host-direction='top']:before,
-    &[data-tui-host-direction='bottom']:before {
-        display: none;
-    }
-
-    &[data-tui-host-direction='top-left']:before,
-    &[data-tui-host-direction='top-right']:before,
-    &[data-tui-host-direction='top-middle']:before {
-        bottom: (-@arrowSize / 2);
-    }
-
-    &[data-tui-host-direction='bottom-left']:before,
-    &[data-tui-host-direction='bottom-right']:before,
-    &[data-tui-host-direction='bottom-middle']:before {
-        top: (-@arrowSize / 2);
-    }
-
-    &[data-tui-host-direction='bottom-middle']:before,
-    &[data-tui-host-direction='top-middle']:before {
-        left: calc(50% - @arrowCompensation);
-    }
-
-    &[data-tui-host-direction='top-left']:before,
-    &[data-tui-host-direction='bottom-left']:before {
-        right: @arrowOffset + @arrowCompensation;
-    }
-
-    &[data-tui-host-direction='top-right']:before,
-    &[data-tui-host-direction='bottom-right']:before {
-        left: @arrowOffset + @arrowCompensation;
-    }
-
-    &[data-tui-host-direction='left']:before,
-    &[data-tui-host-direction='right']:before {
-        top: 50%;
-        margin-top: (-@arrowSize / 2);
-    }
-
-    &[data-tui-host-direction='left']:before {
-        right: (-@arrowSize / 2);
-    }
-
-    &[data-tui-host-direction='right']:before {
-        left: (-@arrowSize / 2);
-    }
-
-    &[data-mode='error'] {
-        background-color: var(--tui-error-fill);
-    }
-
-    &[data-mode='onDark'],
-    &[data-mode='overflow'] {
-        .shadow(2);
-        border: 1px solid var(--tui-base-03);
-        background-color: var(--tui-base-01);
-        color: var(--tui-text-01);
-
-        &:before {
-            border: 1px solid var(--tui-base-03);
-        }
-
-        &[data-tui-host-direction='left']:before {
-            border-left-color: transparent;
-            border-bottom-color: transparent;
-        }
-
-        &[data-tui-host-direction='right']:before {
-            border-right-color: transparent;
-            border-top-color: transparent;
-        }
-
-        &[data-tui-host-direction='top-left']:before,
-        &[data-tui-host-direction='top-right']:before,
-        &[data-tui-host-direction='top-middle']:before {
-            border-left-color: transparent;
-            border-top-color: transparent;
-        }
-
-        &[data-tui-host-direction='bottom-left']:before,
-        &[data-tui-host-direction='bottom-right']:before,
-        &[data-tui-host-direction='bottom-middle']:before {
-            border-right-color: transparent;
-            border-bottom-color: transparent;
-        }
-    }
-
-    &[data-mode='overflow'] {
-        max-width: none;
-    }
-
-    &._untouchable {
-        pointer-events: none;
-    }
-}
-
-.t-tooltip {
-    font: var(--tui-font-text-s);
-    word-wrap: break-word;
-    padding: @space * 3 @space * 4;
-
-    :host[data-mode='overflow'] & {
-        font: inherit;
-    }
-}
-
-.t-text {
-    white-space: pre-wrap;
-}
diff --git a/projects/core/components/hints-host/hint-box/hint-box.template.html b/projects/core/components/hints-host/hint-box/hint-box.template.html
deleted file mode 100644
index f37079b4fcdc..000000000000
--- a/projects/core/components/hints-host/hint-box/hint-box.template.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!-- @bad TODO: Refactor to use this arrow in all cases -->
-<div
-    *ngIf="isMobile"
-    #arrow
-    class="t-arrow"
-></div>
-<div
-    automation-id="tui-hint-box__tooltip"
-    class="t-tooltip"
-    (tuiHoveredChange)="onHovered($event)"
->
-    <span
-        *polymorpheusOutlet="hint.content as text"
-        class="t-text"
-        [textContent]="text"
-    ></span>
-</div>
diff --git a/projects/core/components/hints-host/hints-host.component.ts b/projects/core/components/hints-host/hints-host.component.ts
index a970ae5223c8..9ce59efe0bd8 100644
--- a/projects/core/components/hints-host/hints-host.component.ts
+++ b/projects/core/components/hints-host/hints-host.component.ts
@@ -1,12 +1,9 @@
-import {ChangeDetectionStrategy, Component, ElementRef, Inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
 import {TUI_PARENT_ANIMATION} from '@taiga-ui/cdk';
 import {TuiHint} from '@taiga-ui/core/interfaces';
 import {TuiHintService} from '@taiga-ui/core/services';
-import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
 
-import {TuiHintBoxComponent} from './hint-box/hint-box.component';
-
 @Component({
     selector: `tui-hints-host`,
     templateUrl: `./hints-host.template.html`,
@@ -18,14 +15,7 @@ import {TuiHintBoxComponent} from './hint-box/hint-box.component';
     },
 })
 export class TuiHintsHostComponent {
-    readonly component = new PolymorpheusComponent(TuiHintBoxComponent);
-
     constructor(
-        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
         @Inject(TuiHintService) readonly hints$: Observable<readonly TuiHint[]>,
     ) {}
-
-    get clientRect(): ClientRect {
-        return this.elementRef.nativeElement.getBoundingClientRect();
-    }
 }
diff --git a/projects/core/components/hints-host/hints-host.module.ts b/projects/core/components/hints-host/hints-host.module.ts
index 5a540115cffb..ba2493a966b0 100644
--- a/projects/core/components/hints-host/hints-host.module.ts
+++ b/projects/core/components/hints-host/hints-host.module.ts
@@ -3,11 +3,10 @@ import {NgModule} from '@angular/core';
 import {TuiActiveZoneModule} from '@taiga-ui/cdk';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
-import {TuiHintBoxModule} from './hint-box/hint-box.module';
 import {TuiHintsHostComponent} from './hints-host.component';
 
 @NgModule({
-    imports: [CommonModule, PolymorpheusModule, TuiHintBoxModule, TuiActiveZoneModule],
+    imports: [CommonModule, PolymorpheusModule, TuiActiveZoneModule],
     declarations: [TuiHintsHostComponent],
     exports: [TuiHintsHostComponent],
 })
diff --git a/projects/core/components/hints-host/hints-host.template.html b/projects/core/components/hints-host/hints-host.template.html
index 98015f79b43e..75a14f3fef1b 100644
--- a/projects/core/components/hints-host/hints-host.template.html
+++ b/projects/core/components/hints-host/hints-host.template.html
@@ -5,5 +5,5 @@
     [attr.id]="hint.id"
     [tuiActiveZoneParent]="hint.activeZone"
 >
-    <ng-container *polymorpheusOutlet="hint.component || component; context: {$implicit: hint}"></ng-container>
+    <ng-container *polymorpheusOutlet="hint.component; context: {$implicit: hint}"></ng-container>
 </div>
diff --git a/projects/core/components/hints-host/index.ts b/projects/core/components/hints-host/index.ts
index 9020ddb89d61..728a3e97f0c4 100644
--- a/projects/core/components/hints-host/index.ts
+++ b/projects/core/components/hints-host/index.ts
@@ -1,4 +1,2 @@
-export * from './hint-box/hint-box.component';
-export * from './hint-box/hint-box.module';
 export * from './hints-host.component';
 export * from './hints-host.module';
diff --git a/projects/core/components/primitive-textfield/primitive-textfield.template.html b/projects/core/components/primitive-textfield/primitive-textfield.template.html
index 2f384370207b..b02716dcfd2e 100644
--- a/projects/core/components/primitive-textfield/primitive-textfield.template.html
+++ b/projects/core/components/primitive-textfield/primitive-textfield.template.html
@@ -101,7 +101,7 @@
             [describeId]="computedId"
             [content]="hintController.content || ''"
             [direction]="hintController.direction"
-            [mode]="hintController.mode"
+            [appearance]="hintController.appearance"
             [showDelay]="hintController.showDelay"
             [hideDelay]="hintController.hideDelay"
         ></tui-tooltip>
diff --git a/projects/core/components/tooltip/tooltip.component.ts b/projects/core/components/tooltip/tooltip.component.ts
index fc900941de1a..93057c215ca0 100644
--- a/projects/core/components/tooltip/tooltip.component.ts
+++ b/projects/core/components/tooltip/tooltip.component.ts
@@ -5,14 +5,20 @@ import {
     HostListener,
     Inject,
     Input,
+    ViewChild,
 } from '@angular/core';
 import {TUI_IS_MOBILE, tuiDefaultProp, TuiDestroyService} from '@taiga-ui/cdk';
-import {TUI_HINT_OPTIONS, TuiHintOptions} from '@taiga-ui/core/directives';
+import {TuiDriver} from '@taiga-ui/core/abstract';
+import {
+    TUI_HINT_OPTIONS,
+    TuiHintControllerDirective,
+    TuiHintOptions,
+} from '@taiga-ui/core/directives';
 import {MODE_PROVIDER} from '@taiga-ui/core/providers';
 import {TUI_MODE} from '@taiga-ui/core/tokens';
-import {TuiBrightness, TuiHintMode} from '@taiga-ui/core/types';
+import {TuiBrightness} from '@taiga-ui/core/types';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {Observable} from 'rxjs';
+import {EMPTY, Observable} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
 @Component({
@@ -21,29 +27,13 @@ import {takeUntil} from 'rxjs/operators';
     styleUrls: [`./tooltip.style.less`],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TuiDestroyService, MODE_PROVIDER],
+    inputs: [`content`, `direction`, `appearance`, `showDelay`, `hideDelay`],
 })
-export class TuiTooltipComponent {
-    private globalMode: TuiBrightness | null = null;
-
-    @Input()
-    @tuiDefaultProp()
-    content: PolymorpheusContent = ``;
-
-    @Input()
-    @tuiDefaultProp()
-    mode: TuiHintOptions['mode'] = this.options.mode;
-
-    @Input()
-    @tuiDefaultProp()
-    direction: TuiHintOptions['direction'] = this.options.direction;
-
-    @Input()
-    @tuiDefaultProp()
-    showDelay: TuiHintOptions['tuiHintShowDelay'] = this.options.tuiHintShowDelay;
+export class TuiTooltipComponent extends TuiHintControllerDirective {
+    private mode: TuiBrightness | null = null;
 
-    @Input()
-    @tuiDefaultProp()
-    hideDelay: TuiHintOptions['tuiHintHideDelay'] = this.options.tuiHintHideDelay;
+    @ViewChild(TuiDriver)
+    readonly driver$: Observable<boolean> = EMPTY;
 
     @Input()
     @tuiDefaultProp()
@@ -52,18 +42,19 @@ export class TuiTooltipComponent {
     constructor(
         @Inject(TuiDestroyService) destroy$: Observable<unknown>,
         @Inject(TUI_MODE) mode$: Observable<TuiBrightness | null>,
+        @Inject(TUI_HINT_OPTIONS) options: TuiHintOptions,
         @Inject(TUI_IS_MOBILE) private readonly isMobile: boolean,
-        @Inject(TUI_HINT_OPTIONS) private readonly options: TuiHintOptions,
     ) {
+        super(options);
+
         mode$.pipe(takeUntil(destroy$)).subscribe(mode => {
-            this.globalMode = mode;
+            this.mode = mode;
         });
     }
 
-    // TODO: Simplify
-    @HostBinding(`attr.data-mode`)
-    get computedMode(): TuiHintMode | null {
-        return this.mode || (this.globalMode === `onDark` ? `onDark` : null);
+    @HostBinding(`attr.data-appearance`)
+    get computedAppearance(): string {
+        return this.appearance || this.mode || ``;
     }
 
     @HostListener(`mousedown`, [`$event`])
@@ -76,6 +67,6 @@ export class TuiTooltipComponent {
     }
 
     get icon(): PolymorpheusContent {
-        return this.options.tooltipIcon;
+        return this.options.icon;
     }
 }
diff --git a/projects/core/components/tooltip/tooltip.style.less b/projects/core/components/tooltip/tooltip.style.less
index f04bf928d303..90969e685b69 100644
--- a/projects/core/components/tooltip/tooltip.style.less
+++ b/projects/core/components/tooltip/tooltip.style.less
@@ -16,15 +16,15 @@
         color: var(--tui-text-02);
     }
 
-    &[data-mode='onDark'] {
+    &[data-appearance='onDark'] {
         color: var(--tui-text-01-night);
     }
 
-    &[data-mode='onLight'] {
+    &[data-appearance='onLight'] {
         color: var(--tui-text-01);
     }
 
-    &[data-mode='error'] {
+    &[data-appearance='error'] {
         color: var(--tui-error-fill);
     }
 }
@@ -35,16 +35,15 @@
     width: 100%;
     height: 100%;
 
-    :host:not([data-mode]) &._hint_hovered {
+    :host:not([data-appearance]) &_hovered {
         color: var(--tui-text-02);
     }
 
-    :host[data-mode='onLight'] &,
-    :host[data-mode='onDark'] & {
+    :host[data-appearance='onLight'] &,
+    :host[data-appearance='onDark'] & {
         opacity: var(--tui-disabled-opacity);
 
-        &:hover,
-        &._hint_hovered {
+        &_hovered {
             opacity: 1;
         }
     }
diff --git a/projects/core/components/tooltip/tooltip.template.html b/projects/core/components/tooltip/tooltip.template.html
index 21123944679a..33d173aea0a6 100644
--- a/projects/core/components/tooltip/tooltip.template.html
+++ b/projects/core/components/tooltip/tooltip.template.html
@@ -1,12 +1,13 @@
 <span
     automation-id="tui-tooltip__icon"
     class="icon"
+    [class.icon_hovered]="driver$ | async"
     [tuiHintId]="describeId"
     [tuiHint]="content"
     [tuiHintDirection]="direction"
     [tuiHintShowDelay]="showDelay"
     [tuiHintHideDelay]="hideDelay"
-    [tuiHintMode]="computedMode"
+    [tuiHintAppearance]="computedAppearance"
 >
     <tui-svg
         *polymorpheusOutlet="icon as src"
diff --git a/projects/core/constants/hint-directions.ts b/projects/core/constants/hint-directions.ts
new file mode 100644
index 000000000000..b92dfaf9c8b5
--- /dev/null
+++ b/projects/core/constants/hint-directions.ts
@@ -0,0 +1,16 @@
+import {TuiHintDirection} from '@taiga-ui/core/types';
+
+export const TUI_HINT_DIRECTIONS: readonly TuiHintDirection[] = [
+    `bottom-left`,
+    `bottom`,
+    `bottom-right`,
+    `top-left`,
+    `top`,
+    `top-right`,
+    `left-top`,
+    `left`,
+    `left-bottom`,
+    `right-top`,
+    `right`,
+    `right-bottom`,
+];
diff --git a/projects/core/constants/index.ts b/projects/core/constants/index.ts
index 0787aa4c55e8..30bc9105b6a9 100644
--- a/projects/core/constants/index.ts
+++ b/projects/core/constants/index.ts
@@ -5,6 +5,7 @@ export * from './default-marker-handler';
 export * from './described-by';
 export * from './editing-keys';
 export * from './events';
+export * from './hint-directions';
 export * from './mask-caret-trap';
 export * from './regexp';
 export * from './version';
diff --git a/projects/core/directives/hint-controller/hint-controller.directive.ts b/projects/core/directives/hint-controller/hint-controller.directive.ts
index 29f86a5c9dfa..ead22c9a5d80 100644
--- a/projects/core/directives/hint-controller/hint-controller.directive.ts
+++ b/projects/core/directives/hint-controller/hint-controller.directive.ts
@@ -24,19 +24,19 @@ export class TuiHintControllerDirective extends AbstractTuiController {
     @tuiDefaultProp()
     direction: TuiHintOptions['direction'] = this.options.direction;
 
-    @Input(`tuiHintMode`)
+    @Input(`tuiHintAppearance`)
     @tuiDefaultProp()
-    mode: TuiHintOptions['mode'] = this.options.mode;
+    appearance = ``;
 
     @Input(`tuiHintShowDelay`)
     @tuiDefaultProp()
-    showDelay: TuiHintOptions['tuiHintShowDelay'] = this.options.tuiHintShowDelay;
+    showDelay: TuiHintOptions['showDelay'] = this.options.showDelay;
 
     @Input(`tuiHintHideDelay`)
     @tuiDefaultProp()
-    hideDelay: TuiHintOptions['tuiHintHideDelay'] = this.options.tuiHintHideDelay;
+    hideDelay: TuiHintOptions['hideDelay'] = this.options.hideDelay;
 
-    constructor(@Inject(TUI_HINT_OPTIONS) private readonly options: TuiHintOptions) {
+    constructor(@Inject(TUI_HINT_OPTIONS) protected readonly options: TuiHintOptions) {
         super();
     }
 }
diff --git a/projects/core/directives/hint/hint-driver.directive.ts b/projects/core/directives/hint/hint-driver.directive.ts
new file mode 100644
index 000000000000..9a90884308f8
--- /dev/null
+++ b/projects/core/directives/hint/hint-driver.directive.ts
@@ -0,0 +1,9 @@
+import {Directive} from '@angular/core';
+import {TuiDestroyService} from '@taiga-ui/cdk';
+import {AbstractTuiDriverDirective} from '@taiga-ui/core/abstract';
+
+@Directive({
+    selector: `[tuiHint]`,
+    providers: [TuiDestroyService],
+})
+export class TuiHintDriverDirective extends AbstractTuiDriverDirective {}
diff --git a/projects/core/directives/hint/hint-host.directive.ts b/projects/core/directives/hint/hint-host.directive.ts
new file mode 100644
index 000000000000..e5eafa1bb4f7
--- /dev/null
+++ b/projects/core/directives/hint/hint-host.directive.ts
@@ -0,0 +1,16 @@
+import {Directive, Input} from '@angular/core';
+import {EMPTY_CLIENT_RECT} from '@taiga-ui/cdk';
+import {tuiAsRectAccessor, TuiRectAccessor} from '@taiga-ui/core/abstract';
+
+@Directive({
+    selector: `[tuiHint][tuiHintHost]`,
+    providers: [tuiAsRectAccessor(TuiHintHostDirective)],
+})
+export class TuiHintHostDirective extends TuiRectAccessor {
+    @Input()
+    tuiHintHost?: HTMLElement;
+
+    getClientRect(): ClientRect {
+        return this.tuiHintHost?.getBoundingClientRect() || EMPTY_CLIENT_RECT;
+    }
+}
diff --git a/projects/core/directives/hint/hint-hover.directive.ts b/projects/core/directives/hint/hint-hover.directive.ts
new file mode 100644
index 000000000000..4960172d4010
--- /dev/null
+++ b/projects/core/directives/hint/hint-hover.directive.ts
@@ -0,0 +1,39 @@
+import {Directive, Inject, Input} from '@angular/core';
+import {tuiDefaultProp, TuiHoveredService} from '@taiga-ui/cdk';
+import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/abstract';
+import {merge, Observable, of, Subject} from 'rxjs';
+import {delay, switchMap} from 'rxjs/operators';
+
+import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options';
+
+@Directive({
+    selector: `[tuiHint]:not(ng-container)`,
+    providers: [tuiAsDriver(TuiHintHoverDirective), TuiHoveredService],
+})
+export class TuiHintHoverDirective extends TuiDriver {
+    private readonly toggle$ = new Subject<boolean>();
+    private readonly stream$ = merge(this.toggle$, this.hovered$).pipe(
+        switchMap(visible =>
+            of(visible).pipe(delay(visible ? this.showDelay : this.hideDelay)),
+        ),
+    );
+
+    @Input(`tuiHintShowDelay`)
+    @tuiDefaultProp()
+    showDelay: TuiHintOptions['showDelay'] = this.options.showDelay;
+
+    @Input(`tuiHintHideDelay`)
+    @tuiDefaultProp()
+    hideDelay: TuiHintOptions['hideDelay'] = this.options.hideDelay;
+
+    constructor(
+        @Inject(TuiHoveredService) private readonly hovered$: Observable<boolean>,
+        @Inject(TUI_HINT_OPTIONS) private readonly options: TuiHintOptions,
+    ) {
+        super(subscriber => this.stream$.subscribe(subscriber));
+    }
+
+    toggle(visible: boolean): void {
+        this.toggle$.next(visible);
+    }
+}
diff --git a/projects/core/directives/hint/hint-manual.directive.ts b/projects/core/directives/hint/hint-manual.directive.ts
new file mode 100644
index 000000000000..5204fbdd66f7
--- /dev/null
+++ b/projects/core/directives/hint/hint-manual.directive.ts
@@ -0,0 +1,20 @@
+import {Directive, Input} from '@angular/core';
+import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/abstract';
+import {Subject} from 'rxjs';
+
+@Directive({
+    selector: `[tuiHint][tuiHintManual]`,
+    providers: [tuiAsDriver(TuiHintManualDirective)],
+})
+export class TuiHintManualDirective extends TuiDriver {
+    private readonly stream$ = new Subject<boolean>();
+
+    @Input()
+    set tuiHintManual(visible: boolean) {
+        this.stream$.next(visible);
+    }
+
+    constructor() {
+        super(subscriber => this.stream$.subscribe(subscriber));
+    }
+}
diff --git a/projects/core/directives/hint/hint-options.ts b/projects/core/directives/hint/hint-options.ts
index 43e95076be63..42fc6a9967e3 100644
--- a/projects/core/directives/hint/hint-options.ts
+++ b/projects/core/directives/hint/hint-options.ts
@@ -1,26 +1,26 @@
 import {InjectionToken, ValueProvider} from '@angular/core';
-import {
-    TUI_ABSTRACT_HINT_DEFAULT_OPTIONS,
-    TuiAbstractHintOptions,
-} from '@taiga-ui/core/abstract';
+import {TuiHintDirection} from '@taiga-ui/core/types';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-export interface TuiHintOptions extends TuiAbstractHintOptions {
-    readonly tuiHintShowDelay: number;
-    readonly tuiHintHideDelay: number;
-    readonly tooltipIcon: PolymorpheusContent;
+export interface TuiHintOptions {
+    readonly direction: TuiHintDirection;
+    readonly showDelay: number;
+    readonly hideDelay: number;
+    readonly appearance: string;
+    readonly icon: PolymorpheusContent;
 }
 
 /** Default values for hint options */
 export const TUI_HINT_DEFAULT_OPTIONS: TuiHintOptions = {
-    ...TUI_ABSTRACT_HINT_DEFAULT_OPTIONS,
-    tuiHintShowDelay: 500,
-    tuiHintHideDelay: 200,
-    tooltipIcon: `tuiIconTooltipLarge`,
+    direction: `bottom-left`,
+    showDelay: 500,
+    hideDelay: 200,
+    appearance: ``,
+    icon: `tuiIconTooltipLarge`,
 };
 
 export const TUI_HINT_OPTIONS = new InjectionToken<TuiHintOptions>(
-    `Default parameters for hint directive`,
+    `[TUI_HINT_OPTIONS] Default parameters for hint directive`,
     {
         factory: () => TUI_HINT_DEFAULT_OPTIONS,
     },
diff --git a/projects/core/directives/hint/hint-pointer.directive.ts b/projects/core/directives/hint/hint-pointer.directive.ts
new file mode 100644
index 000000000000..ce3f0f48d6e9
--- /dev/null
+++ b/projects/core/directives/hint/hint-pointer.directive.ts
@@ -0,0 +1,28 @@
+import {Directive, HostListener} from '@angular/core';
+import {EMPTY_CLIENT_RECT, tuiPointToClientRect} from '@taiga-ui/cdk';
+import {tuiAsDriver, tuiAsRectAccessor, TuiRectAccessor} from '@taiga-ui/core/abstract';
+
+import {TuiHintHoverDirective} from './hint-hover.directive';
+
+@Directive({
+    selector: `[tuiHint][tuiHintPointer]`,
+    providers: [
+        tuiAsRectAccessor(TuiHintPointerDirective),
+        tuiAsDriver(TuiHintPointerDirective),
+    ],
+})
+export class TuiHintPointerDirective
+    extends TuiHintHoverDirective
+    implements TuiRectAccessor
+{
+    private currentRect = EMPTY_CLIENT_RECT;
+
+    @HostListener(`mousemove.silent`, [`$event`])
+    onMove({clientX, clientY}: MouseEvent): void {
+        this.currentRect = tuiPointToClientRect(clientX, clientY);
+    }
+
+    getClientRect(): ClientRect {
+        return this.currentRect;
+    }
+}
diff --git a/projects/core/directives/hint/hint-position.directive.ts b/projects/core/directives/hint/hint-position.directive.ts
new file mode 100644
index 000000000000..c43f49f2ee37
--- /dev/null
+++ b/projects/core/directives/hint/hint-position.directive.ts
@@ -0,0 +1,94 @@
+import {Directive, Inject, Input} from '@angular/core';
+import {WINDOW} from '@ng-web-apis/common';
+import {tuiDefaultProp} from '@taiga-ui/cdk';
+import {
+    tuiAsPositionAccessor,
+    TuiPositionAccessor,
+    TuiRectAccessor,
+} from '@taiga-ui/core/abstract';
+import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core/constants';
+import {TuiHintDirection, TuiPoint} from '@taiga-ui/core/types';
+
+import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options';
+
+const OFFSET = 8;
+const ARROW_OFFSET = 22;
+const TOP = 0;
+const LEFT = 1;
+
+@Directive({
+    selector: `[tuiHint]:not([tuiHintCustomPosition])`,
+    providers: [tuiAsPositionAccessor(TuiHintPositionDirective)],
+})
+export class TuiHintPositionDirective implements TuiPositionAccessor {
+    private readonly points: Record<TuiHintDirection, [number, number]> =
+        TUI_HINT_DIRECTIONS.reduce(
+            (acc, direction) => ({...acc, [direction]: [0, 0]}),
+            {} as any,
+        );
+
+    @Input(`tuiHintDirection`)
+    @tuiDefaultProp()
+    direction: TuiHintOptions['direction'] = this.options.direction;
+
+    constructor(
+        @Inject(TUI_HINT_OPTIONS) private readonly options: TuiHintOptions,
+        @Inject(WINDOW) private readonly windowRef: Window,
+        @Inject(TuiRectAccessor) private readonly accessor: TuiRectAccessor,
+    ) {}
+
+    getPosition({width, height}: ClientRect): TuiPoint {
+        const hostRect = this.accessor.getClientRect();
+        const leftCenter = hostRect.left + hostRect.width / 2;
+        const topCenter = hostRect.top + hostRect.height / 2;
+
+        this.points[`top-left`][TOP] = hostRect.top - height - OFFSET;
+        this.points[`top-left`][LEFT] = leftCenter - width + ARROW_OFFSET;
+        this.points.top[TOP] = this.points[`top-left`][TOP];
+        this.points.top[LEFT] = leftCenter - width / 2;
+        this.points[`top-right`][TOP] = this.points[`top-left`][TOP];
+        this.points[`top-right`][LEFT] = leftCenter - ARROW_OFFSET;
+
+        this.points[`bottom-left`][TOP] = hostRect.bottom + OFFSET;
+        this.points[`bottom-left`][LEFT] = this.points[`top-left`][LEFT];
+        this.points.bottom[TOP] = this.points[`bottom-left`][TOP];
+        this.points.bottom[LEFT] = this.points.top[LEFT];
+        this.points[`bottom-right`][TOP] = this.points[`bottom-left`][TOP];
+        this.points[`bottom-right`][LEFT] = this.points[`top-right`][LEFT];
+
+        this.points[`left-top`][TOP] = topCenter - height + ARROW_OFFSET;
+        this.points[`left-top`][LEFT] = hostRect.left - width - OFFSET;
+        this.points.left[TOP] = topCenter - height / 2;
+        this.points.left[LEFT] = this.points[`left-top`][LEFT];
+        this.points[`left-bottom`][TOP] = topCenter - ARROW_OFFSET;
+        this.points[`left-bottom`][LEFT] = this.points[`left-top`][LEFT];
+
+        this.points[`right-top`][TOP] = this.points[`left-top`][TOP];
+        this.points[`right-top`][LEFT] = hostRect.right + OFFSET;
+        this.points.right[TOP] = this.points.left[TOP];
+        this.points.right[LEFT] = this.points[`right-top`][LEFT];
+        this.points[`right-bottom`][TOP] = this.points[`left-bottom`][TOP];
+        this.points[`right-bottom`][LEFT] = this.points[`right-top`][LEFT];
+
+        if (this.checkPosition(this.points[this.direction], width, height)) {
+            return this.points[this.direction];
+        }
+
+        const direction = TUI_HINT_DIRECTIONS.find(direction =>
+            this.checkPosition(this.points[direction], width, height),
+        );
+
+        return this.points[direction || this.direction];
+    }
+
+    private checkPosition([top, left]: TuiPoint, width: number, height: number): boolean {
+        const {innerHeight, innerWidth} = this.windowRef;
+
+        return (
+            top > OFFSET &&
+            left > OFFSET &&
+            top + height < innerHeight - OFFSET &&
+            left + width < innerWidth - OFFSET
+        );
+    }
+}
diff --git a/projects/core/directives/hint/hint.component.ts b/projects/core/directives/hint/hint.component.ts
new file mode 100644
index 000000000000..50e47c0db93c
--- /dev/null
+++ b/projects/core/directives/hint/hint.component.ts
@@ -0,0 +1,93 @@
+import {AnimationOptions} from '@angular/animations';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    HostBinding,
+    Inject,
+    Optional,
+} from '@angular/core';
+import {
+    tuiClamp,
+    TuiContextWithImplicit,
+    TuiDestroyService,
+    TuiHoveredService,
+    tuiPure,
+    tuiPx,
+} from '@taiga-ui/cdk';
+import {TuiDriver, TuiRectAccessor} from '@taiga-ui/core/abstract';
+import {tuiFadeIn} from '@taiga-ui/core/animations';
+import {TuiModeDirective} from '@taiga-ui/core/directives/mode';
+import {TuiHint} from '@taiga-ui/core/interfaces';
+import {TuiPositionService} from '@taiga-ui/core/services';
+import {TUI_ANIMATION_OPTIONS} from '@taiga-ui/core/tokens';
+import {TuiPoint} from '@taiga-ui/core/types';
+import {POLYMORPHEUS_CONTEXT, PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {Observable} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+import {TuiHintHoverDirective} from './hint-hover.directive';
+import {TuiHintPointerDirective} from './hint-pointer.directive';
+
+@Component({
+    selector: `tui-hint`,
+    template: `
+        <ng-container *polymorpheusOutlet="content as text">{{ text }}</ng-container>
+    `,
+    styleUrls: [`./hint.style.less`],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TuiDestroyService, TuiPositionService, TuiHoveredService],
+    animations: [tuiFadeIn],
+})
+export class TuiHintComponent {
+    @HostBinding(`@tuiFadeIn`)
+    readonly animation = {value: ``, ...this.options} as const;
+
+    @HostBinding(`attr.data-appearance`)
+    readonly appearance = this.context.$implicit.appearance || this.mode?.mode;
+
+    @HostBinding(`class._untouchable`)
+    readonly untouchable = this.driver instanceof TuiHintPointerDirective;
+
+    constructor(
+        @Inject(TuiHoveredService) hovered$: Observable<boolean>,
+        @Inject(TuiPositionService) position$: Observable<TuiPoint>,
+        @Inject(TuiDestroyService) destroy$: Observable<void>,
+        @Inject(TuiRectAccessor) protected readonly accessor: TuiRectAccessor,
+        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
+        @Inject(TUI_ANIMATION_OPTIONS) private readonly options: AnimationOptions,
+        @Inject(POLYMORPHEUS_CONTEXT)
+        private readonly context: TuiContextWithImplicit<TuiHint>,
+        @Inject(TuiDriver) private readonly driver: TuiDriver,
+        @Optional()
+        @Inject(TuiModeDirective)
+        private readonly mode: TuiModeDirective | null,
+    ) {
+        position$.pipe(takeUntil(destroy$)).subscribe(([top, left]) => {
+            this.update(top, left);
+        });
+
+        if (driver instanceof TuiHintHoverDirective) {
+            hovered$.pipe(takeUntil(destroy$)).subscribe(hover => driver.toggle(hover));
+        }
+    }
+
+    get content(): PolymorpheusContent {
+        return this.context.$implicit.content;
+    }
+
+    @tuiPure
+    private update(top: number, left: number): void {
+        const {nativeElement} = this.elementRef;
+        const {height, width} = nativeElement.getBoundingClientRect();
+        const {style} = nativeElement;
+        const rect = this.accessor.getClientRect();
+        const beakTop = rect.top + rect.height / 2 - top;
+        const beakLeft = rect.left + rect.width / 2 - left;
+
+        style.top = tuiPx(top);
+        style.left = tuiPx(left);
+        style.setProperty(`--top`, tuiPx(tuiClamp(beakTop, 0, height - 1)));
+        style.setProperty(`--left`, tuiPx(tuiClamp(beakLeft, 0, width - 1)));
+    }
+}
diff --git a/projects/core/directives/hint/hint.directive.ts b/projects/core/directives/hint/hint.directive.ts
index 970d9438936c..895b6384302f 100644
--- a/projects/core/directives/hint/hint.directive.ts
+++ b/projects/core/directives/hint/hint.directive.ts
@@ -2,130 +2,61 @@ import {
     Directive,
     ElementRef,
     Inject,
+    INJECTOR,
     Input,
+    OnChanges,
     OnDestroy,
     Optional,
-    Renderer2,
-    Self,
 } from '@angular/core';
+import {TuiActiveZoneDirective, tuiDefaultProp} from '@taiga-ui/cdk';
 import {
-    TuiActiveZoneDirective,
-    tuiDefaultProp,
-    TuiDestroyService,
-    TuiHoveredService,
-    TuiObscuredService,
-    TuiParentsScrollService,
-    tuiRequiredSetter,
-} from '@taiga-ui/cdk';
-import {AbstractTuiHint} from '@taiga-ui/core/abstract';
+    tuiAsRectAccessor,
+    tuiAsVehicle,
+    TuiRectAccessor,
+    TuiVehicle,
+} from '@taiga-ui/core/abstract';
 import {DESCRIBED_BY} from '@taiga-ui/core/constants';
+import {TuiHint} from '@taiga-ui/core/interfaces';
 import {TuiHintService} from '@taiga-ui/core/services';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {combineLatest, of, Subject} from 'rxjs';
-import {
-    delay,
-    distinctUntilChanged,
-    map,
-    startWith,
-    switchMap,
-    take,
-    takeUntil,
-} from 'rxjs/operators';
-
-import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options';
+import {PolymorpheusComponent, PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-export const HINT_HOVERED_CLASS = `_hint_hovered`;
+import {TUI_HINT_COMPONENT} from './hint.providers';
 
 @Directive({
     selector: `[tuiHint]:not(ng-container)`,
     providers: [
-        TuiObscuredService,
-        TuiParentsScrollService,
-        TuiDestroyService,
-        TuiHoveredService,
+        tuiAsRectAccessor(TuiHintDirective),
+        tuiAsVehicle(TuiHintDirective),
+        {
+            provide: PolymorpheusComponent,
+            deps: [TUI_HINT_COMPONENT, INJECTOR],
+            useClass: PolymorpheusComponent,
+        },
     ],
 })
-export class TuiHintDirective extends AbstractTuiHint implements OnDestroy {
-    @Input()
-    tuiHintId?: string;
-
-    @Input()
-    @tuiDefaultProp()
-    tuiHintShowDelay: TuiHintOptions['tuiHintShowDelay'] = this.options.tuiHintShowDelay;
-
+export class TuiHintDirective
+    implements OnDestroy, OnChanges, TuiHint, TuiRectAccessor, TuiVehicle
+{
     @Input()
     @tuiDefaultProp()
-    tuiHintHideDelay: TuiHintOptions['tuiHintHideDelay'] = this.options.tuiHintHideDelay;
+    tuiHintId = ``;
 
-    @Input()
+    @Input(`tuiHint`)
     @tuiDefaultProp()
-    tuiHintHost: HTMLElement | null = null;
-
-    @Input()
-    @tuiRequiredSetter()
-    set tuiHint(value: PolymorpheusContent) {
-        if (!value) {
-            this.hideTooltip();
-            this.content = ``;
-
-            return;
-        }
+    content: PolymorpheusContent = ``;
 
-        this.content = value;
-    }
-
-    readonly componentHovered$ = new Subject<boolean>();
+    @Input(`tuiHintAppearance`)
+    appearance = ``;
 
     constructor(
-        @Inject(Renderer2) private readonly renderer: Renderer2,
-        @Inject(ElementRef) elementRef: ElementRef<HTMLElement>,
-        @Inject(TuiHintService) hintService: TuiHintService,
-        @Inject(TuiDestroyService)
-        destroy$: TuiDestroyService,
-        @Inject(TuiObscuredService)
-        @Self()
-        obscured$: TuiObscuredService,
-        @Inject(TuiHoveredService) hoveredService: TuiHoveredService,
+        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
+        @Inject(PolymorpheusComponent)
+        readonly component: PolymorpheusComponent<object, object>,
         @Optional()
         @Inject(TuiActiveZoneDirective)
-        activeZone: TuiActiveZoneDirective | null,
-        @Inject(TUI_HINT_OPTIONS) protected readonly options: TuiHintOptions,
+        readonly activeZone: TuiActiveZoneDirective | null,
+        @Inject(TuiHintService) private readonly hintService: TuiHintService,
     ) {
-        super(elementRef, hintService, activeZone, options);
-
-        // @bad TODO: Use private provider
-        combineLatest(hoveredService, this.componentHovered$.pipe(startWith(false)))
-            .pipe(
-                map(
-                    ([directiveHovered, componentHovered]) =>
-                        directiveHovered || componentHovered,
-                ),
-                switchMap(visible => {
-                    this.toggleClass(visible);
-
-                    return of(visible).pipe(
-                        delay(visible ? this.tuiHintShowDelay : this.tuiHintHideDelay),
-                    );
-                }),
-                switchMap(visible =>
-                    visible && this.mode !== `overflow`
-                        ? obscured$.pipe(
-                              map(obscured => !obscured),
-                              take(2),
-                          )
-                        : of(visible),
-                ),
-                distinctUntilChanged(),
-                takeUntil(destroy$),
-            )
-            .subscribe(visible => {
-                if (visible) {
-                    this.showTooltip();
-                } else {
-                    this.hideTooltip();
-                }
-            });
-
         this.hintService.register(this);
     }
 
@@ -133,37 +64,26 @@ export class TuiHintDirective extends AbstractTuiHint implements OnDestroy {
         return this.tuiHintId ? this.tuiHintId + DESCRIBED_BY : null;
     }
 
-    get host(): HTMLElement {
-        return this.tuiHintHost ? this.tuiHintHost : this.elementRef.nativeElement;
-    }
-
-    getElementClientRect(): ClientRect {
-        return this.host.getBoundingClientRect();
+    ngOnChanges(): void {
+        if (!this.content) {
+            this.toggle(false);
+        }
     }
 
     ngOnDestroy(): void {
+        this.toggle(false);
         this.hintService.unregister(this);
     }
 
-    protected showTooltip(): void {
-        if (this.content === ``) {
-            return;
-        }
-
-        this.toggleClass(true);
-        this.hintService.add(this);
-    }
-
-    protected hideTooltip(): void {
-        this.toggleClass(false);
-        this.hintService.remove(this);
+    getClientRect(): ClientRect {
+        return this.elementRef.nativeElement.getBoundingClientRect();
     }
 
-    private toggleClass(add: boolean): void {
-        if (add) {
-            this.renderer.addClass(this.elementRef.nativeElement, HINT_HOVERED_CLASS);
+    toggle(show: boolean): void {
+        if (show && this.content) {
+            this.hintService.add(this);
         } else {
-            this.renderer.removeClass(this.elementRef.nativeElement, HINT_HOVERED_CLASS);
+            this.hintService.remove(this);
         }
     }
 }
diff --git a/projects/core/directives/hint/hint.module.ts b/projects/core/directives/hint/hint.module.ts
index 1fbb93f1bab3..43d09b66cea3 100644
--- a/projects/core/directives/hint/hint.module.ts
+++ b/projects/core/directives/hint/hint.module.ts
@@ -1,9 +1,38 @@
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
+import {TuiHintComponent} from './hint.component';
 import {TuiHintDirective} from './hint.directive';
+import {TuiHintDriverDirective} from './hint-driver.directive';
+import {TuiHintHostDirective} from './hint-host.directive';
+import {TuiHintHoverDirective} from './hint-hover.directive';
+import {TuiHintManualDirective} from './hint-manual.directive';
+import {TuiHintPointerDirective} from './hint-pointer.directive';
+import {TuiHintPositionDirective} from './hint-position.directive';
 
 @NgModule({
-    declarations: [TuiHintDirective],
-    exports: [TuiHintDirective],
+    imports: [CommonModule, PolymorpheusModule],
+    declarations: [
+        TuiHintComponent,
+        TuiHintDirective,
+        TuiHintDriverDirective,
+        TuiHintHostDirective,
+        TuiHintHoverDirective,
+        TuiHintManualDirective,
+        TuiHintPointerDirective,
+        TuiHintPositionDirective,
+    ],
+    exports: [
+        TuiHintComponent,
+        TuiHintDirective,
+        TuiHintDriverDirective,
+        TuiHintHostDirective,
+        TuiHintHoverDirective,
+        TuiHintManualDirective,
+        TuiHintPointerDirective,
+        TuiHintPositionDirective,
+    ],
+    entryComponents: [TuiHintComponent],
 })
 export class TuiHintModule {}
diff --git a/projects/core/directives/hint/hint.providers.ts b/projects/core/directives/hint/hint.providers.ts
new file mode 100644
index 000000000000..b8ae38b09a20
--- /dev/null
+++ b/projects/core/directives/hint/hint.providers.ts
@@ -0,0 +1,10 @@
+import {InjectionToken, Type} from '@angular/core';
+
+import {TuiHintComponent} from './hint.component';
+
+export const TUI_HINT_COMPONENT = new InjectionToken<Type<any>>(
+    `[TUI_HINT_COMPONENT] A component to display a hint`,
+    {
+        factory: () => TuiHintComponent,
+    },
+);
diff --git a/projects/core/directives/hint/hint.style.less b/projects/core/directives/hint/hint.style.less
new file mode 100644
index 000000000000..95d47678c58e
--- /dev/null
+++ b/projects/core/directives/hint/hint.style.less
@@ -0,0 +1,43 @@
+@import '../../styles/taiga-ui-local.less';
+
+:host {
+    position: absolute;
+    max-width: 18rem;
+    min-height: var(--tui-height-m);
+    padding: 0.75rem 1rem;
+    background: var(--tui-primary);
+    border-radius: var(--tui-radius-l);
+    color: var(--tui-primary-text);
+    box-sizing: border-box;
+    font: var(--tui-font-text-s);
+    white-space: pre-line;
+    word-wrap: break-word;
+
+    &:after {
+        content: '';
+        position: absolute;
+        top: var(--top);
+        left: var(--left);
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.125rem;
+        box-sizing: border-box;
+        background-color: inherit;
+        transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    &[data-appearance='error'] {
+        background-color: var(--tui-error-fill);
+    }
+
+    &[data-appearance='onDark'] {
+        .shadow(2);
+        border: 1px solid var(--tui-base-03);
+        background-color: var(--tui-base-01);
+        color: var(--tui-text-01);
+    }
+
+    &._untouchable {
+        pointer-events: none;
+    }
+}
diff --git a/projects/core/directives/hint/index.ts b/projects/core/directives/hint/index.ts
index dd7b89c72d0c..32896b4c2eea 100644
--- a/projects/core/directives/hint/index.ts
+++ b/projects/core/directives/hint/index.ts
@@ -1,3 +1,11 @@
+export * from './hint.component';
 export * from './hint.directive';
 export * from './hint.module';
+export * from './hint.providers';
+export * from './hint-driver.directive';
+export * from './hint-host.directive';
+export * from './hint-hover.directive';
+export * from './hint-manual.directive';
 export * from './hint-options';
+export * from './hint-pointer.directive';
+export * from './hint-position.directive';
diff --git a/projects/core/directives/hint/test/hint.directive.spec.ts b/projects/core/directives/hint/test/hint.directive.spec.ts
index 9b4684cd7146..c490f7cee042 100644
--- a/projects/core/directives/hint/test/hint.directive.spec.ts
+++ b/projects/core/directives/hint/test/hint.directive.spec.ts
@@ -142,7 +142,7 @@ describe(`Hint`, () => {
     }
 
     function getTooltip(): Element | null {
-        return document.querySelector(`[automation-id=tui-hint-box__tooltip]`);
+        return document.querySelector(`tui-hint`);
     }
 
     function setHint(hint: Hint): void {
diff --git a/projects/core/directives/index.ts b/projects/core/directives/index.ts
index 94a66627118a..a7c2b668b274 100644
--- a/projects/core/directives/index.ts
+++ b/projects/core/directives/index.ts
@@ -3,10 +3,8 @@ export * from '@taiga-ui/core/directives/dropdown';
 export * from '@taiga-ui/core/directives/dropdown-controller';
 export * from '@taiga-ui/core/directives/hint';
 export * from '@taiga-ui/core/directives/hint-controller';
-export * from '@taiga-ui/core/directives/manual-hint';
 export * from '@taiga-ui/core/directives/mask-accessor';
 export * from '@taiga-ui/core/directives/mode';
-export * from '@taiga-ui/core/directives/pointer-hint';
 export * from '@taiga-ui/core/directives/scroll-into-view';
 export * from '@taiga-ui/core/directives/textfield-controller';
 export * from '@taiga-ui/core/directives/wrapper';
diff --git a/projects/core/directives/manual-hint/index.ts b/projects/core/directives/manual-hint/index.ts
deleted file mode 100644
index 82863c7caf8c..000000000000
--- a/projects/core/directives/manual-hint/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './manual-hint.directive';
-export * from './manual-hint.module';
-export * from './manual-hint-options';
diff --git a/projects/core/directives/manual-hint/manual-hint-options.ts b/projects/core/directives/manual-hint/manual-hint-options.ts
deleted file mode 100644
index b45ed8378513..000000000000
--- a/projects/core/directives/manual-hint/manual-hint-options.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {InjectionToken, ValueProvider} from '@angular/core';
-import {
-    TUI_ABSTRACT_HINT_DEFAULT_OPTIONS,
-    TuiAbstractHintOptions,
-} from '@taiga-ui/core/abstract';
-
-export type TuiManualHintOptions = TuiAbstractHintOptions;
-
-/** Default values for manual hint options */
-export const TUI_MANUAL_HINT_DEFAULT_OPTIONS: TuiManualHintOptions = {
-    ...TUI_ABSTRACT_HINT_DEFAULT_OPTIONS,
-};
-
-export const TUI_MANUAL_HINT_OPTIONS = new InjectionToken<TuiManualHintOptions>(
-    `Default parameters for manual hint directive`,
-    {
-        factory: () => TUI_MANUAL_HINT_DEFAULT_OPTIONS,
-    },
-);
-
-export const tuiManualHintOptionsProvider: (
-    options: Partial<TuiManualHintOptions>,
-) => ValueProvider = (options: Partial<TuiManualHintOptions>) => ({
-    provide: TUI_MANUAL_HINT_OPTIONS,
-    useValue: {...TUI_MANUAL_HINT_DEFAULT_OPTIONS, ...options},
-});
diff --git a/projects/core/directives/manual-hint/manual-hint.directive.ts b/projects/core/directives/manual-hint/manual-hint.directive.ts
deleted file mode 100644
index 4cec13810192..000000000000
--- a/projects/core/directives/manual-hint/manual-hint.directive.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {Directive, ElementRef, Inject, Input, Optional} from '@angular/core';
-import {TuiActiveZoneDirective, tuiDefaultProp, tuiRequiredSetter} from '@taiga-ui/cdk';
-import {AbstractTuiHint} from '@taiga-ui/core/abstract';
-import {TuiHintService} from '@taiga-ui/core/services';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-
-import {TUI_MANUAL_HINT_OPTIONS, TuiManualHintOptions} from './manual-hint-options';
-
-@Directive({
-    selector: `[tuiManualHint]:not(ng-container)`,
-})
-export class TuiManualHintDirective extends AbstractTuiHint {
-    @Input(`tuiManualHint`)
-    @tuiDefaultProp()
-    content: PolymorpheusContent = ``;
-
-    @Input()
-    @tuiRequiredSetter()
-    set tuiManualHintShow(show: boolean) {
-        if (show) {
-            this.showTooltip();
-        } else {
-            this.hideTooltip();
-        }
-    }
-
-    constructor(
-        @Inject(ElementRef) elementRef: ElementRef<HTMLElement>,
-        @Inject(TuiHintService) hintService: TuiHintService,
-        @Optional()
-        @Inject(TuiActiveZoneDirective)
-        activeZone: TuiActiveZoneDirective | null,
-        @Inject(TUI_MANUAL_HINT_OPTIONS) protected readonly options: TuiManualHintOptions,
-    ) {
-        super(elementRef, hintService, activeZone, options);
-    }
-
-    getElementClientRect(): ClientRect {
-        return this.elementRef.nativeElement.getBoundingClientRect();
-    }
-}
diff --git a/projects/core/directives/manual-hint/manual-hint.module.ts b/projects/core/directives/manual-hint/manual-hint.module.ts
deleted file mode 100644
index 11b3f08c07a6..000000000000
--- a/projects/core/directives/manual-hint/manual-hint.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {NgModule} from '@angular/core';
-
-import {TuiManualHintDirective} from './manual-hint.directive';
-
-@NgModule({
-    declarations: [TuiManualHintDirective],
-    exports: [TuiManualHintDirective],
-})
-export class TuiManualHintModule {}
diff --git a/projects/core/directives/manual-hint/package.json b/projects/core/directives/manual-hint/package.json
deleted file mode 100644
index 289d2d373a50..000000000000
--- a/projects/core/directives/manual-hint/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-    "ngPackage": {
-        "lib": {
-            "entryFile": "index.ts"
-        }
-    }
-}
diff --git a/projects/core/directives/manual-hint/test/manual-hint.directive.spec.ts b/projects/core/directives/manual-hint/test/manual-hint.directive.spec.ts
deleted file mode 100644
index c9f916e1c9c5..000000000000
--- a/projects/core/directives/manual-hint/test/manual-hint.directive.spec.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {Component, TemplateRef} from '@angular/core';
-import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {configureTestSuite} from '@taiga-ui/testing';
-
-import {TuiRootModule} from '../../../components/root/root.module';
-import {TuiManualHintModule} from '../manual-hint.module';
-
-type Hint = string | TemplateRef<Record<string, unknown>> | undefined | null;
-
-describe(`ManualHint`, () => {
-    @Component({
-        template: `
-            <tui-root>
-                <div
-                    *ngIf="host"
-                    id="hint-host"
-                    tuiHintDirection="top"
-                    class="host"
-                    [tuiManualHintShow]="show"
-                    [tuiManualHint]="hint"
-                >
-                    Tooltip host
-                </div>
-            </tui-root>
-        `,
-        styles: [
-            `
-                .host {
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                }
-            `,
-        ],
-    })
-    class TestComponent {
-        hint: Hint = `Tooltip text`;
-        show = false;
-        host = true;
-    }
-
-    let fixture: ComponentFixture<TestComponent>;
-    let component: TestComponent;
-
-    configureTestSuite(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                CommonModule,
-                TuiManualHintModule,
-                TuiRootModule,
-                NoopAnimationsModule,
-            ],
-            declarations: [TestComponent],
-        });
-    });
-
-    beforeEach(() => {
-        document.body.style.margin = `0`;
-        fixture = TestBed.createComponent(TestComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it(`Tooltip is showed with flag`, fakeAsync(() => {
-        component.show = true;
-
-        fixture.detectChanges();
-        tick();
-
-        expect(getTooltip()).not.toBeNull();
-    }));
-
-    it(`Tooltip disappears if host disappears with flag`, async () => {
-        component.show = true;
-
-        fixture.detectChanges();
-
-        component.host = false;
-
-        fixture.detectChanges();
-
-        await fixture.whenStable();
-
-        fixture.detectChanges();
-        expect(getTooltip()).toBeNull();
-    });
-
-    it(`Tooltip is not showed with no flag`, async () => {
-        component.show = false;
-
-        fixture.detectChanges();
-
-        await fixture.whenStable();
-
-        expect(getTooltip()).toBeNull();
-    });
-
-    function getTooltip(): Element | null {
-        return document.querySelector(`[automation-id=tui-hint-box__tooltip]`);
-    }
-});
diff --git a/projects/core/directives/pointer-hint/index.ts b/projects/core/directives/pointer-hint/index.ts
deleted file mode 100644
index 64456eca588b..000000000000
--- a/projects/core/directives/pointer-hint/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './pointer-hint.directive';
-export * from './pointer-hint.module';
-export * from './pointer-hint-options';
diff --git a/projects/core/directives/pointer-hint/package.json b/projects/core/directives/pointer-hint/package.json
deleted file mode 100644
index 289d2d373a50..000000000000
--- a/projects/core/directives/pointer-hint/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-    "ngPackage": {
-        "lib": {
-            "entryFile": "index.ts"
-        }
-    }
-}
diff --git a/projects/core/directives/pointer-hint/pointer-hint-options.ts b/projects/core/directives/pointer-hint/pointer-hint-options.ts
deleted file mode 100644
index 18bbf815588f..000000000000
--- a/projects/core/directives/pointer-hint/pointer-hint-options.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {InjectionToken, ValueProvider} from '@angular/core';
-import {
-    TUI_ABSTRACT_HINT_DEFAULT_OPTIONS,
-    TuiAbstractHintOptions,
-} from '@taiga-ui/core/abstract';
-
-export interface TuiPointerHintOptions extends TuiAbstractHintOptions {
-    readonly tuiHintShowDelay: number;
-    readonly tuiHintHideDelay: number;
-}
-
-/** Default values for pointer hint options */
-export const TUI_POINTER_HINT_DEFAULT_OPTIONS: TuiPointerHintOptions = {
-    ...TUI_ABSTRACT_HINT_DEFAULT_OPTIONS,
-    tuiHintShowDelay: 0,
-    tuiHintHideDelay: 0,
-};
-
-export const TUI_POINTER_HINT_OPTIONS = new InjectionToken<TuiPointerHintOptions>(
-    `Default parameters for pointer hint directive`,
-    {
-        factory: () => TUI_POINTER_HINT_DEFAULT_OPTIONS,
-    },
-);
-
-export const tuiPointerHintOptionsProvider: (
-    options: Partial<TuiPointerHintOptions>,
-) => ValueProvider = (options: Partial<TuiPointerHintOptions>) => ({
-    provide: TUI_POINTER_HINT_OPTIONS,
-    useValue: {...TUI_POINTER_HINT_DEFAULT_OPTIONS, ...options},
-});
diff --git a/projects/core/directives/pointer-hint/pointer-hint.directive.ts b/projects/core/directives/pointer-hint/pointer-hint.directive.ts
deleted file mode 100644
index 2134fe1b79ca..000000000000
--- a/projects/core/directives/pointer-hint/pointer-hint.directive.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import {Directive, ElementRef, Inject, Input} from '@angular/core';
-import {
-    tuiDefaultProp,
-    TuiDestroyService,
-    TuiHoveredService,
-    tuiRequiredSetter,
-    typedFromEvent,
-} from '@taiga-ui/cdk';
-import {AbstractTuiHint} from '@taiga-ui/core/abstract';
-import {TuiHintService} from '@taiga-ui/core/services';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {Observable, of} from 'rxjs';
-import {
-    delay,
-    distinctUntilChanged,
-    filter,
-    startWith,
-    switchMap,
-    takeUntil,
-} from 'rxjs/operators';
-
-import {TUI_POINTER_HINT_OPTIONS, TuiPointerHintOptions} from './pointer-hint-options';
-
-@Directive({
-    selector: `[tuiPointerHint]:not(ng-container)`,
-    providers: [TuiDestroyService, TuiHoveredService],
-})
-export class TuiPointerHintDirective extends AbstractTuiHint {
-    private currentMouseRect = this.mousePositionToClientRect();
-
-    @Input()
-    @tuiDefaultProp()
-    tuiHintShowDelay: TuiPointerHintOptions['tuiHintShowDelay'] =
-        this.options.tuiHintShowDelay;
-
-    @Input()
-    @tuiDefaultProp()
-    tuiHintHideDelay: TuiPointerHintOptions['tuiHintHideDelay'] =
-        this.options.tuiHintHideDelay;
-
-    @Input()
-    @tuiRequiredSetter()
-    set tuiPointerHint(value: PolymorpheusContent) {
-        if (!value) {
-            this.hideTooltip();
-            this.content = ``;
-
-            return;
-        }
-
-        this.content = value;
-    }
-
-    content: PolymorpheusContent = ``;
-
-    constructor(
-        @Inject(ElementRef) elementRef: ElementRef<HTMLElement>,
-        @Inject(TuiHintService) hintService: TuiHintService,
-        @Inject(TuiDestroyService)
-        private readonly destroy$: TuiDestroyService,
-        @Inject(TuiHoveredService) hoveredService: TuiHoveredService,
-        @Inject(TUI_POINTER_HINT_OPTIONS)
-        protected readonly options: TuiPointerHintOptions,
-    ) {
-        super(elementRef, hintService, null, options);
-
-        const hint$ = hoveredService.pipe(
-            filter(() => !!this.content),
-            startWith(false),
-            distinctUntilChanged(),
-        );
-
-        hint$
-            .pipe(
-                switchMap(visible =>
-                    of(visible).pipe(
-                        delay(visible ? this.tuiHintShowDelay : this.tuiHintHideDelay),
-                    ),
-                ),
-                takeUntil(destroy$),
-            )
-            .subscribe({
-                next: visible => {
-                    if (visible) {
-                        this.showTooltip();
-                    } else {
-                        this.hideTooltip();
-                    }
-                },
-                complete: () => {
-                    this.hideTooltip();
-                },
-            });
-
-        this.initMouseMoveSubscription();
-    }
-
-    getElementClientRect(): ClientRect {
-        return this.currentMouseRect;
-    }
-
-    private initMouseMoveSubscription(): void {
-        const mouseMove$: Observable<MouseEvent> = typedFromEvent(
-            this.elementRef.nativeElement,
-            `mousemove`,
-        );
-
-        mouseMove$.pipe(takeUntil(this.destroy$)).subscribe(({clientX, clientY}) => {
-            this.currentMouseRect = this.mousePositionToClientRect(clientX, clientY);
-        });
-    }
-
-    private mousePositionToClientRect(x: number = 0, y: number = 0): ClientRect {
-        return {
-            left: x,
-            right: x,
-            top: y,
-            bottom: y,
-            width: 0,
-            height: 0,
-        };
-    }
-}
diff --git a/projects/core/directives/pointer-hint/pointer-hint.module.ts b/projects/core/directives/pointer-hint/pointer-hint.module.ts
deleted file mode 100644
index 4774d763355a..000000000000
--- a/projects/core/directives/pointer-hint/pointer-hint.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {NgModule} from '@angular/core';
-
-import {TuiPointerHintDirective} from './pointer-hint.directive';
-
-@NgModule({
-    declarations: [TuiPointerHintDirective],
-    exports: [TuiPointerHintDirective],
-})
-export class TuiPointerHintModule {}
diff --git a/projects/core/directives/pointer-hint/test/pointer-hint.directive.spec.ts b/projects/core/directives/pointer-hint/test/pointer-hint.directive.spec.ts
deleted file mode 100644
index 6b3cb26de9fb..000000000000
--- a/projects/core/directives/pointer-hint/test/pointer-hint.directive.spec.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import {Component, ElementRef, ViewChild} from '@angular/core';
-import {ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {configureTestSuite} from '@taiga-ui/testing';
-
-import {TuiRootModule} from '../../../components/root/root.module';
-import {TuiPointerHintDirective} from '../pointer-hint.directive';
-import {TuiPointerHintModule} from '../pointer-hint.module';
-
-describe(`PointerHint`, () => {
-    @Component({
-        template: `
-            <tui-root>
-                <div
-                    #hintHost
-                    id="hint-host"
-                    tuiHintDirection="top"
-                    class="host"
-                    [tuiPointerHint]="hint"
-                >
-                    Tooltip host
-                </div>
-            </tui-root>
-        `,
-        styles: [
-            `
-                .host {
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                }
-            `,
-        ],
-    })
-    class TestComponent {
-        @ViewChild(TuiPointerHintDirective, {static: true})
-        directive!: TuiPointerHintDirective;
-
-        @ViewChild(`hintHost`, {static: true})
-        host!: ElementRef<HTMLElement>;
-
-        hint = `Tooltip text`;
-    }
-
-    let fixture: ComponentFixture<TestComponent>;
-    let component: TestComponent;
-    let hostElement: HTMLElement;
-    let directive: TuiPointerHintDirective;
-
-    configureTestSuite(() => {
-        TestBed.configureTestingModule({
-            imports: [TuiPointerHintModule, TuiRootModule, NoopAnimationsModule],
-            declarations: [TestComponent],
-        });
-    });
-
-    beforeEach(() => {
-        document.body.style.margin = `0`;
-        fixture = TestBed.createComponent(TestComponent);
-        component = fixture.componentInstance;
-        hostElement = component.host.nativeElement;
-        directive = component.directive;
-        fixture.detectChanges();
-    });
-
-    it(`is not shown by default`, fakeAsync(() => {
-        expect(getTooltip()).toBeNull();
-    }));
-
-    it(`has default clientRect`, fakeAsync(() => {
-        const clientRect = directive.getElementClientRect();
-
-        expect(clientRect.left).toBe(0);
-        expect(clientRect.top).toBe(0);
-    }));
-
-    it(`recalculates clientRect from user mouse moving`, fakeAsync(() => {
-        const hoverEvent = new MouseEvent(`hover`);
-
-        hostElement.dispatchEvent(hoverEvent);
-
-        component.host.nativeElement.dispatchEvent(
-            new MouseEvent(`mousemove`, {
-                clientX: 10,
-                clientY: 10,
-            }),
-        );
-
-        const clientRect = directive.getElementClientRect();
-
-        expect(clientRect.left).toBe(10);
-        expect(clientRect.top).toBe(10);
-    }));
-
-    function getTooltip(): Element | null {
-        return document.querySelector(`[automation-id=tui-hint-box__tooltip]`);
-    }
-});
diff --git a/projects/core/interfaces/hint.ts b/projects/core/interfaces/hint.ts
index 0aa9deb0a4a5..5bf1b215c8c5 100644
--- a/projects/core/interfaces/hint.ts
+++ b/projects/core/interfaces/hint.ts
@@ -5,5 +5,6 @@ export interface TuiHint {
     readonly id: string | null;
     readonly component: PolymorpheusComponent<object, object>;
     readonly content: PolymorpheusContent;
+    readonly appearance: string;
     readonly activeZone: TuiActiveZoneDirective | null;
 }
diff --git a/projects/core/services/hint.service.ts b/projects/core/services/hint.service.ts
index 18c1723aa546..29a2a90c71f9 100644
--- a/projects/core/services/hint.service.ts
+++ b/projects/core/services/hint.service.ts
@@ -1,45 +1,42 @@
 import {Injectable} from '@angular/core';
+import {DESCRIBED_BY} from '@taiga-ui/core/constants';
+import {TuiHint} from '@taiga-ui/core/interfaces';
 import {BehaviorSubject} from 'rxjs';
 
-// It prevented seps cycling
-type TuiHintDirective = any;
-
-type AbstractTuiHint = any;
-
 /**
  * Service for displaying hints/tooltips
  */
 @Injectable({
     providedIn: `root`,
 })
-export class TuiHintService extends BehaviorSubject<readonly AbstractTuiHint[]> {
+export class TuiHintService extends BehaviorSubject<readonly TuiHint[]> {
     /**
      * TODO:
      * We need the following logic for desribedBy
      * move it into another service that can register hints and
      * manage it using TuiHintService inside
      */
-    private directives: readonly TuiHintDirective[] = [];
+    private directives: readonly TuiHint[] = [];
 
     constructor() {
         super([]);
     }
 
-    add(directive: AbstractTuiHint): void {
+    add(directive: TuiHint): void {
         this.next(this.value.concat(directive));
     }
 
-    remove(directive: AbstractTuiHint): void {
+    remove(directive: TuiHint): void {
         if (this.value.includes(directive)) {
             this.next(this.value.filter(hint => hint !== directive));
         }
     }
 
-    register(directive: TuiHintDirective): void {
+    register(directive: TuiHint): void {
         this.directives = [...this.directives, directive];
     }
 
-    unregister(directive: TuiHintDirective): void {
+    unregister(directive: TuiHint): void {
         this.remove(directive);
         this.directives = this.directives.filter(dir => dir !== directive);
     }
@@ -60,7 +57,7 @@ export class TuiHintService extends BehaviorSubject<readonly AbstractTuiHint[]>
         }
     }
 
-    private findDirectiveWithHintId(id: string): TuiHintDirective | undefined {
-        return this.directives.find(directive => directive.tuiHintId === id);
+    private findDirectiveWithHintId(id: string): TuiHint | undefined {
+        return this.directives.find(directive => directive.id === id + DESCRIBED_BY);
     }
 }
diff --git a/projects/core/services/index.ts b/projects/core/services/index.ts
index 0f90a5b6e200..0dad7bbebd95 100644
--- a/projects/core/services/index.ts
+++ b/projects/core/services/index.ts
@@ -1,4 +1,5 @@
 export * from './hint.service';
 export * from './night-theme.service';
+export * from './position.service';
 export * from './router-link-active.service';
 export * from './svg.service';
diff --git a/projects/core/services/position.service.ts b/projects/core/services/position.service.ts
new file mode 100644
index 000000000000..6d8d9af943a1
--- /dev/null
+++ b/projects/core/services/position.service.ts
@@ -0,0 +1,27 @@
+import {ElementRef, Inject, Injectable, NgZone} from '@angular/core';
+import {ANIMATION_FRAME} from '@ng-web-apis/common';
+import {tuiZonefree} from '@taiga-ui/cdk';
+import {TuiPositionAccessor} from '@taiga-ui/core/abstract';
+import {TuiPoint} from '@taiga-ui/core/types';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Injectable()
+export class TuiPositionService extends Observable<TuiPoint> {
+    constructor(
+        @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,
+        @Inject(ANIMATION_FRAME) animationFrame: Observable<unknown>,
+        @Inject(NgZone) ngZone: NgZone,
+        @Inject(TuiPositionAccessor) accessor: TuiPositionAccessor,
+    ) {
+        super(subscriber =>
+            animationFrame
+                .pipe(
+                    map(() => nativeElement.getBoundingClientRect()),
+                    map(rect => accessor.getPosition(rect)),
+                    tuiZonefree(ngZone),
+                )
+                .subscribe(subscriber),
+        );
+    }
+}
diff --git a/projects/core/types/hint-direction.ts b/projects/core/types/hint-direction.ts
new file mode 100644
index 000000000000..60a008b5527c
--- /dev/null
+++ b/projects/core/types/hint-direction.ts
@@ -0,0 +1,13 @@
+export type TuiHintDirection =
+    | 'top-left'
+    | 'top'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom'
+    | 'bottom-right'
+    | 'left-top'
+    | 'left'
+    | 'left-bottom'
+    | 'right-top'
+    | 'right'
+    | 'right-bottom';
diff --git a/projects/core/types/hint-mode.ts b/projects/core/types/hint-mode.ts
deleted file mode 100644
index 1b0706357c82..000000000000
--- a/projects/core/types/hint-mode.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type TuiHintMode = 'error' | 'onDark' | 'overflow';
diff --git a/projects/core/types/index.ts b/projects/core/types/index.ts
index 673125383c81..c52dbf450931 100644
--- a/projects/core/types/index.ts
+++ b/projects/core/types/index.ts
@@ -5,7 +5,7 @@ export * from './decimal-symbol';
 export * from './dialog-size';
 export * from './direction';
 export * from './dropdown-width';
-export * from './hint-mode';
+export * from './hint-direction';
 export * from './marker-handler';
 export * from './option-role';
 export * from './orientation';
diff --git a/projects/core/types/point.ts b/projects/core/types/point.ts
index 32ed0604be6d..fff4bd9ed523 100644
--- a/projects/core/types/point.ts
+++ b/projects/core/types/point.ts
@@ -1 +1 @@
-export type TuiPoint = Readonly<[number, number]>;
+export type TuiPoint = Readonly<[top: number, left: number]>;
diff --git a/projects/demo/src/modules/app/app.const.ts b/projects/demo/src/modules/app/app.const.ts
index 760aba1a4aac..fbc3dc8fbf51 100644
--- a/projects/demo/src/modules/app/app.const.ts
+++ b/projects/demo/src/modules/app/app.const.ts
@@ -1,5 +1,5 @@
 export const SEE_ALSO_GROUPS: ReadonlyArray<readonly string[]> = [
-    [`Tooltip`, `Hint`, `ManualHint`],
+    [`Tooltip`, `Hint`, `HintManual`, `HintPointer`],
     [`LineChart`, `LineDaysChart`],
     [`PrimitiveTextfield`, `Input`, `TextArea`],
     [
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index cad57e1f2878..d532888d2ea2 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -1164,21 +1164,21 @@ export const ROUTES = [
         },
     },
     {
-        path: `directives/manual-hint`,
+        path: `directives/hint-manual`,
         loadChildren: async () =>
-            (await import(`../directives/manual-hint/manual-hint.module`))
-                .ExampleTuiManualHintModule,
+            (await import(`../directives/hint-manual/hint-manual.module`))
+                .ExampleTuiHintManualModule,
         data: {
-            title: `ManualHint`,
+            title: `HintManual`,
         },
     },
     {
-        path: `directives/pointer-hint`,
+        path: `directives/hint-pointer`,
         loadChildren: async () =>
-            (await import(`../directives/pointer-hint/pointer-hint.module`))
-                .ExampleTuiPointerHintModule,
+            (await import(`../directives/hint-pointer/hint-pointer.module`))
+                .ExampleTuiHintPointerModule,
         data: {
-            title: `PointerHint`,
+            title: `HintPointer`,
         },
     },
     {
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index f7f1ff783f04..9931c74e42fa 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -368,6 +368,36 @@ export const pages: TuiDocPages = [
         keywords: `buttongroup, форма, поле, кнопка, группировка, группа, Group`,
         route: `/components/group`,
     },
+    {
+        section: $localize`Components`,
+        title: `Hint`,
+        subPages: [
+            {
+                section: $localize`Components`,
+                title: `Tooltip`,
+                keywords: `tooltip, тултип, hint, подсказка, помощь, help`,
+                route: `/components/tooltip`,
+            },
+            {
+                section: $localize`Tools`,
+                title: `Hint`,
+                keywords: `tooltip, тултип, hint, подсказка, помощь, help, хинт`,
+                route: `/directives/hint`,
+            },
+            {
+                section: $localize`Tools`,
+                title: `ManualHint`,
+                keywords: `tooltip, тултип, hint, подсказка, помощь, help, manual, программный, хинт`,
+                route: `/directives/hint-manual`,
+            },
+            {
+                section: $localize`Tools`,
+                title: `PointerHint`,
+                keywords: `tooltip, тултип, hint, подсказка, помощь, help, хинт, курсор`,
+                route: `/directives/hint-pointer`,
+            },
+        ],
+    },
     {
         section: $localize`Components`,
         title: `MarkerIcon`,
@@ -790,12 +820,6 @@ export const pages: TuiDocPages = [
         keywords: `инпут, форма, ввод, toggle, переключение`,
         route: `/components/toggle`,
     },
-    {
-        section: $localize`Components`,
-        title: `Tooltip`,
-        keywords: `tooltip, тултип, hint, подсказка, помощь, help`,
-        route: `/components/tooltip`,
-    },
     {
         section: $localize`Components`,
         title: `Tree`,
@@ -965,36 +989,18 @@ export const pages: TuiDocPages = [
                 keywords: `поиск, подсветка, search, find, найти`,
                 route: `/directives/highlight`,
             },
-            {
-                section: $localize`Tools`,
-                title: `Hint`,
-                keywords: `tooltip, тултип, hint, подсказка, помощь, help, хинт`,
-                route: `/directives/hint`,
-            },
             {
                 section: $localize`Tools`,
                 title: `LazyLoading`,
                 keywords: `img, skeleton, скелетон, загрузка, картинки`,
                 route: `/directives/lazy-loading`,
             },
-            {
-                section: $localize`Tools`,
-                title: `ManualHint`,
-                keywords: `tooltip, тултип, hint, подсказка, помощь, help, manual, программный, хинт`,
-                route: `/directives/manual-hint`,
-            },
             {
                 section: $localize`Tools`,
                 title: `Overscroll`,
                 keywords: `overscroll, scroll, скролл`,
                 route: `/directives/overscroll`,
             },
-            {
-                section: $localize`Tools`,
-                title: `PointerHint`,
-                keywords: `tooltip, тултип, hint, подсказка, помощь, help, хинт, курсор`,
-                route: `/directives/pointer-hint`,
-            },
             {
                 section: $localize`Tools`,
                 title: `Pan`,
diff --git a/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts b/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts
index 55cb87af40ad..c25ca11bf7bc 100644
--- a/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts
+++ b/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts
@@ -3,7 +3,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiCurrency, tuiGetCurrencySymbol} from '@taiga-ui/addon-commerce';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiContextWithImplicit} from '@taiga-ui/cdk';
-import {formatNumber, TuiHintMode, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {formatNumber, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 const MONTHS: readonly string[] = [
@@ -75,9 +75,9 @@ export class ExampleTuiBarChartComponent {
 
     hintContent = this.contentVariants[0];
 
-    readonly hintModeVariants: readonly TuiHintMode[] = [`onDark`, `error`];
+    readonly hintAppearanceVariants = [``, `onDark`, `error`];
 
-    hintMode: TuiHintMode | null = null;
+    hintAppearance = this.hintAppearanceVariants[0];
 
     getHint(index: number): string {
         return this.value
diff --git a/projects/demo/src/modules/charts/bar-chart/bar-chart.template.html b/projects/demo/src/modules/charts/bar-chart/bar-chart.template.html
index 06533a893159..91835634d22d 100644
--- a/projects/demo/src/modules/charts/bar-chart/bar-chart.template.html
+++ b/projects/demo/src/modules/charts/bar-chart/bar-chart.template.html
@@ -44,7 +44,7 @@
                 [max]="max"
                 [size]="size"
                 [hintContent]="hintContent"
-                [hintMode]="hintMode"
+                [hintAppearance]="hintAppearance"
             ></tui-bar-chart>
         </tui-doc-demo>
         <tui-doc-documentation>
@@ -69,11 +69,11 @@
             </ng-template>
             <ng-template
                 i18n
-                documentationPropertyName="hintMode"
+                documentationPropertyName="hintAppearance"
                 documentationPropertyMode="input"
                 documentationPropertyType="TuiHintModeT | null"
-                [documentationPropertyValues]="hintModeVariants"
-                [(documentationPropertyValue)]="hintMode"
+                [documentationPropertyValues]="hintAppearanceVariants"
+                [(documentationPropertyValue)]="hintAppearance"
             >
                 Hint mode
             </ng-template>
diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts
index 4b939abc2313..07309abd0b4d 100644
--- a/projects/demo/src/modules/components/abstract/control.ts
+++ b/projects/demo/src/modules/components/abstract/control.ts
@@ -3,9 +3,8 @@ import {TuiAutofillFieldName, TuiInputMode, TuiInputType} from '@taiga-ui/cdk';
 import {
     DEFAULT_MAX_HEIGHT,
     DEFAULT_MIN_HEIGHT,
-    TuiDirection,
+    TUI_HINT_DIRECTIONS,
     TuiDropdownWidth,
-    TuiHintMode,
     TuiHorizontalDirection,
     TuiSizeL,
     TuiSizeS,
@@ -39,18 +38,9 @@ export abstract class AbstractExampleTuiControl
 
     readonly hintContentVariants: readonly string[] = [`Some content`];
 
-    readonly hintDirectionVariants: readonly TuiDirection[] = [
-        `left`,
-        `right`,
-        `bottom-left`,
-        `bottom-right`,
-        `bottom-middle`,
-        `top-left`,
-        `top-right`,
-        `top-middle`,
-    ];
+    readonly hintDirectionVariants = TUI_HINT_DIRECTIONS;
 
-    readonly hintModeVariants: readonly TuiHintMode[] = [`error`, `onDark`];
+    readonly hintAppearanceVariants = [``, `error`, `onDark`];
 
     readonly typeVariants: readonly TuiInputType[] = [
         `text`,
@@ -118,9 +108,9 @@ export abstract class AbstractExampleTuiControl
 
     hintContent: string | null = null;
 
-    hintDirection: TuiDirection = this.hintDirectionVariants[2];
+    hintDirection = this.hintDirectionVariants[0];
 
-    hintMode: TuiHintMode | null = null;
+    hintAppearance = this.hintAppearanceVariants[0];
 
     readonly dropdownAlignVariants: readonly TuiHorizontalDirection[] = [`left`, `right`];
 
diff --git a/projects/demo/src/modules/components/abstract/hint-controller-documentation/hint-controller-documentation.template.html b/projects/demo/src/modules/components/abstract/hint-controller-documentation/hint-controller-documentation.template.html
index e43c2cab1d6c..3d3c3d15b163 100644
--- a/projects/demo/src/modules/components/abstract/hint-controller-documentation/hint-controller-documentation.template.html
+++ b/projects/demo/src/modules/components/abstract/hint-controller-documentation/hint-controller-documentation.template.html
@@ -40,11 +40,11 @@
     </ng-template>
     <ng-template
         i18n
-        documentationPropertyName="tuiHintMode"
+        documentationPropertyName="tuiHintAppearance"
         documentationPropertyMode="input"
-        documentationPropertyType="TuiHintModeT | null"
-        [documentationPropertyValues]="documentedComponent.hintModeVariants"
-        [(documentationPropertyValue)]="documentedComponent.hintMode"
+        documentationPropertyType="string"
+        [documentationPropertyValues]="documentedComponent.hintAppearanceVariants"
+        [(documentationPropertyValue)]="documentedComponent.hintAppearance"
     >
         Hint mode
     </ng-template>
diff --git a/projects/demo/src/modules/components/abstract/hint.ts b/projects/demo/src/modules/components/abstract/hint.ts
index 6aadc0cc0a1d..6dc621ad5d3f 100644
--- a/projects/demo/src/modules/components/abstract/hint.ts
+++ b/projects/demo/src/modules/components/abstract/hint.ts
@@ -1,20 +1,11 @@
-import {TuiDirection, TuiHintMode} from '@taiga-ui/core';
+import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core';
 
 export abstract class AbstractExampleTuiHint {
-    readonly modeVariants: readonly TuiHintMode[] = [`error`, `onDark`];
+    readonly appearanceVariants = [``, `error`, `onDark`];
 
-    mode: TuiHintMode | null = null;
+    appearance = this.appearanceVariants[0];
 
-    readonly directionVariants: readonly TuiDirection[] = [
-        `left`,
-        `right`,
-        `bottom-left`,
-        `bottom-right`,
-        `bottom-middle`,
-        `top-left`,
-        `top-right`,
-        `top-middle`,
-    ];
+    readonly directionVariants = TUI_HINT_DIRECTIONS;
 
-    direction: TuiDirection = this.directionVariants[5];
+    direction = this.directionVariants[0];
 }
diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
index 04aa78dd26d1..230d0e77563d 100644
--- a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
+++ b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
@@ -1,6 +1,6 @@
 import {Component, Inject, Input} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDirection, TuiHintMode} from '@taiga-ui/core';
+import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core';
 
 import {AbstractExampleTuiControl} from '../control';
 import {AbstractExampleTuiHint} from '../hint';
@@ -19,18 +19,9 @@ export class InheritedDocumentationComponent {
 
     readonly booleanVariants: readonly boolean[] = [false, true];
 
-    readonly directionVariants: readonly TuiDirection[] = [
-        `left`,
-        `right`,
-        `bottom-left`,
-        `bottom-right`,
-        `bottom-middle`,
-        `top-left`,
-        `top-right`,
-        `top-middle`,
-    ];
-
-    readonly modeVariants: readonly TuiHintMode[] = [`error`, `onDark`];
+    readonly directionVariants = TUI_HINT_DIRECTIONS;
+
+    readonly appearanceVariants = [``, `error`, `onDark`];
 
     constructor(
         @Inject(ABSTRACT_PROPS_ACCESSOR)
diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html
index 93c72a4be7c4..125794e212e0 100644
--- a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html
+++ b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html
@@ -132,11 +132,11 @@ <h6 class="tui-text_h6">
         </ng-template>
         <ng-template
             i18n
-            documentationPropertyName="tuiHintMode"
+            documentationPropertyName="tuiHintAppearance"
             documentationPropertyMode="input"
-            documentationPropertyType="TuiHintModeT | null"
-            [documentationPropertyValues]="modeVariants"
-            [(documentationPropertyValue)]="documentedComponent.mode"
+            documentationPropertyType="string"
+            [documentationPropertyValues]="appearanceVariants"
+            [(documentationPropertyValue)]="documentedComponent.appearance"
         >
             Hint mode
         </ng-template>
diff --git a/projects/demo/src/modules/components/combo-box/combo-box.template.html b/projects/demo/src/modules/components/combo-box/combo-box.template.html
index 5d523ff1ae8f..f4a922205ac1 100644
--- a/projects/demo/src/modules/components/combo-box/combo-box.template.html
+++ b/projects/demo/src/modules/components/combo-box/combo-box.template.html
@@ -101,7 +101,7 @@
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldCleaner]="cleaner"
                     [tuiTextfieldMaxLength]="maxLength"
diff --git a/projects/demo/src/modules/components/input-card/input-card.component.ts b/projects/demo/src/modules/components/input-card/input-card.component.ts
index 78023faf0c17..155eded16640 100644
--- a/projects/demo/src/modules/components/input-card/input-card.component.ts
+++ b/projects/demo/src/modules/components/input-card/input-card.component.ts
@@ -43,7 +43,7 @@ export class ExampleTuiInputCardComponent extends AbstractExampleTuiControl {
 
     hintDirectionCVC: TuiHintOptions['direction'] = `bottom-left`;
 
-    hintModeCVC = null;
+    hintAppearanceCVC = ``;
 
     readonly cards: Record<string, string> = {
         common: `https://ng-web-apis.github.io/dist/assets/images/common.svg`,
diff --git a/projects/demo/src/modules/components/input-card/input-card.template.html b/projects/demo/src/modules/components/input-card/input-card.template.html
index 475ee7c514dd..7ea7205fac5d 100644
--- a/projects/demo/src/modules/components/input-card/input-card.template.html
+++ b/projects/demo/src/modules/components/input-card/input-card.template.html
@@ -45,7 +45,7 @@
                         [pseudoFocus]="pseudoFocused"
                         [tuiHintContent]="hintContent"
                         [tuiHintDirection]="hintDirection"
-                        [tuiHintMode]="hintMode"
+                        [tuiHintAppearance]="hintAppearance"
                         (binChange)="onBinChange($event)"
                     >
                         Card number
@@ -80,7 +80,7 @@
                         [pseudoFocus]="pseudoFocused"
                         [tuiHintContent]="hintContentCVC"
                         [tuiHintDirection]="hintDirectionCVC"
-                        [tuiHintMode]="hintModeCVC"
+                        [tuiHintAppearance]="hintAppearanceCVC"
                     >
                         CVC/CVV
                     </tui-input-cvc>
diff --git a/projects/demo/src/modules/components/input-copy/input-copy.component.ts b/projects/demo/src/modules/components/input-copy/input-copy.component.ts
index d5f5f4921e34..e9154d40a5a1 100644
--- a/projects/demo/src/modules/components/input-copy/input-copy.component.ts
+++ b/projects/demo/src/modules/components/input-copy/input-copy.component.ts
@@ -62,7 +62,7 @@ export class ExampleTuiInputCopyComponent extends AbstractExampleTuiControl {
     successMessage = this.successMessageVariants[0];
 
     messageDirection = this.hintDirectionVariants[0];
-    messageMode = this.hintModeVariants[0];
+    messageMode = this.hintAppearanceVariants[0];
 
     get notificationTemplate(): PolymorpheusContent {
         return this.successMessage === `Template`
diff --git a/projects/demo/src/modules/components/input-copy/input-copy.template.html b/projects/demo/src/modules/components/input-copy/input-copy.template.html
index df1192c689bb..09422c8fa214 100644
--- a/projects/demo/src/modules/components/input-copy/input-copy.template.html
+++ b/projects/demo/src/modules/components/input-copy/input-copy.template.html
@@ -36,7 +36,7 @@
                 [tuiTextfieldCleaner]="cleaner"
                 [successMessage]="notificationTemplate"
                 [messageDirection]="hintDirection"
-                [messageMode]="hintMode"
+                [messageAppearance]="hintAppearance"
                 [readOnly]="readOnly"
                 [pseudoInvalid]="pseudoInvalid"
                 [pseudoFocus]="pseudoFocused"
@@ -81,7 +81,7 @@
                 documentationPropertyName="messageMode"
                 documentationPropertyMode="input"
                 documentationPropertyType="TuiHintModeT | null"
-                [documentationPropertyValues]="hintModeVariants"
+                [documentationPropertyValues]="hintAppearanceVariants"
                 [(documentationPropertyValue)]="messageMode"
             >
                 Message tooltip mode
diff --git a/projects/demo/src/modules/components/input-date-range/input-date-range.template.html b/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
index 41406abfe924..bfa4e6153571 100644
--- a/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
+++ b/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
@@ -140,7 +140,7 @@ <h3 i18n>DI-tokens for input-configurations:</h3>
                     [readOnly]="readOnly"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                     [disabledItemHandler]="disabledItemHandler"
                 >
                     Choose dates
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
index 1e4d40fcf7f0..207568b2cff6 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
+++ b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
@@ -113,7 +113,7 @@ <h3 i18n>DI-tokens for input-configurations:</h3>
                     [timeMode]="mode"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldAutocomplete]="autocomplete"
                     [tuiTextfieldCleaner]="cleaner"
diff --git a/projects/demo/src/modules/components/input-date/input-date.template.html b/projects/demo/src/modules/components/input-date/input-date.template.html
index 915908cf90fd..67c2800434f3 100644
--- a/projects/demo/src/modules/components/input-date/input-date.template.html
+++ b/projects/demo/src/modules/components/input-date/input-date.template.html
@@ -137,7 +137,7 @@ <h3 i18n>DI-tokens for input-configurations:</h3>
                     [tuiTextfieldSize]="size"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                 >
                     Choose a date
                 </tui-input-date>
diff --git a/projects/demo/src/modules/components/input-month-range/input-month-range.template.html b/projects/demo/src/modules/components/input-month-range/input-month-range.template.html
index 72f957f55de3..717d6db4b0f1 100644
--- a/projects/demo/src/modules/components/input-month-range/input-month-range.template.html
+++ b/projects/demo/src/modules/components/input-month-range/input-month-range.template.html
@@ -62,7 +62,7 @@
                     [disabledItemHandler]="disabledItemHandler"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                 >
                     Months
                 </tui-input-month-range>
diff --git a/projects/demo/src/modules/components/input-number/input-number.template.html b/projects/demo/src/modules/components/input-number/input-number.template.html
index ce52e7aaf7f9..621d0a8ee361 100644
--- a/projects/demo/src/modules/components/input-number/input-number.template.html
+++ b/projects/demo/src/modules/components/input-number/input-number.template.html
@@ -185,7 +185,7 @@ <h3>There are also other components to input numbers:</h3>
                     [postfix]="postfix"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                 >
                     Type a sum
                 </tui-input-number>
diff --git a/projects/demo/src/modules/components/input-password/examples/2/index.html b/projects/demo/src/modules/components/input-password/examples/2/index.html
index 16fa6e2fd4ba..69b6fc4851e0 100644
--- a/projects/demo/src/modules/components/input-password/examples/2/index.html
+++ b/projects/demo/src/modules/components/input-password/examples/2/index.html
@@ -6,7 +6,7 @@
         formControlName="testValue"
         tuiHintContent
         tuiHintDirection="right"
-        tuiHintMode="onDark"
+        tuiHintAppearance="onDark"
     >
         Type a password
     </tui-input-password>
diff --git a/projects/demo/src/modules/components/input-password/input-password.template.html b/projects/demo/src/modules/components/input-password/input-password.template.html
index a6a05d2735d2..22570f5cf96d 100644
--- a/projects/demo/src/modules/components/input-password/input-password.template.html
+++ b/projects/demo/src/modules/components/input-password/input-password.template.html
@@ -48,7 +48,7 @@
                     [pseudoHover]="pseudoHovered"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                 >
                     Type a password
                 </tui-input-password>
diff --git a/projects/demo/src/modules/components/input-phone-international/input-phone-international.template.html b/projects/demo/src/modules/components/input-phone-international/input-phone-international.template.html
index 0e130dd2632e..0cbdaf460daf 100644
--- a/projects/demo/src/modules/components/input-phone-international/input-phone-international.template.html
+++ b/projects/demo/src/modules/components/input-phone-international/input-phone-international.template.html
@@ -39,7 +39,7 @@
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                     [pseudoHover]="pseudoHovered"
                     [pseudoFocus]="pseudoFocused"
                     [pseudoInvalid]="pseudoInvalid"
diff --git a/projects/demo/src/modules/components/input-phone/input-phone.template.html b/projects/demo/src/modules/components/input-phone/input-phone.template.html
index f4a8bf8733ab..bb835dd91317 100644
--- a/projects/demo/src/modules/components/input-phone/input-phone.template.html
+++ b/projects/demo/src/modules/components/input-phone/input-phone.template.html
@@ -71,7 +71,7 @@
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                 >
                     Type a phone number
                 </tui-input-phone>
diff --git a/projects/demo/src/modules/components/input-slider/input-slider.template.html b/projects/demo/src/modules/components/input-slider/input-slider.template.html
index 240defc2d262..8ecbf45f6a1a 100644
--- a/projects/demo/src/modules/components/input-slider/input-slider.template.html
+++ b/projects/demo/src/modules/components/input-slider/input-slider.template.html
@@ -132,7 +132,7 @@
                     [tuiTextfieldSize]="size"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                 >
                     Range
                 </tui-input-slider>
diff --git a/projects/demo/src/modules/components/input-tag/input-tag.template.html b/projects/demo/src/modules/components/input-tag/input-tag.template.html
index 4fc02db79ec0..9362bf314ce2 100644
--- a/projects/demo/src/modules/components/input-tag/input-tag.template.html
+++ b/projects/demo/src/modules/components/input-tag/input-tag.template.html
@@ -79,7 +79,7 @@
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                     [tuiTextfieldIcon]="icon"
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldCleaner]="cleaner"
diff --git a/projects/demo/src/modules/components/input-time/input-time.template.html b/projects/demo/src/modules/components/input-time/input-time.template.html
index e078c22354ba..0b0bee889ada 100644
--- a/projects/demo/src/modules/components/input-time/input-time.template.html
+++ b/projects/demo/src/modules/components/input-time/input-time.template.html
@@ -82,7 +82,7 @@
                     [pseudoHover]="pseudoHovered"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                 >
                     Input time
                 </tui-input-time>
diff --git a/projects/demo/src/modules/components/input/input.template.html b/projects/demo/src/modules/components/input/input.template.html
index c8fdd3edd878..930dd2620efd 100644
--- a/projects/demo/src/modules/components/input/input.template.html
+++ b/projects/demo/src/modules/components/input/input.template.html
@@ -239,7 +239,7 @@
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                 >
                     placeholder
                     <strong>strong text</strong>
diff --git a/projects/demo/src/modules/components/line-clamp/examples/1/index.html b/projects/demo/src/modules/components/line-clamp/examples/1/index.html
index bdc4f148df33..5cf2023eabda 100644
--- a/projects/demo/src/modules/components/line-clamp/examples/1/index.html
+++ b/projects/demo/src/modules/components/line-clamp/examples/1/index.html
@@ -1,14 +1,29 @@
 <tui-island class="island">
     <tui-line-clamp
-        [content]="content"
+        [content]="daenerys"
         [lineHeight]="20"
         [linesLimit]="2"
     ></tui-line-clamp>
 </tui-island>
-<ng-template #content>
+<tui-notification class="island">
+    Use
+    <code>white-space: nowrap</code>
+    to expand to the right
+</tui-notification>
+<tui-island class="island">
+    <tui-line-clamp
+        [content]="mormont"
+        [lineHeight]="20"
+        [linesLimit]="1"
+    ></tui-line-clamp>
+</tui-island>
+<ng-template #daenerys>
     <div class="hint">
         Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the
         First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven
         Kingdoms, Breaker of Chains and Mother of Dragons
     </div>
 </ng-template>
+<ng-template #mormont>
+    <div class="hint no-wrap">Jorah Mormont of House Mormont, Lord of Bear Island</div>
+</ng-template>
diff --git a/projects/demo/src/modules/components/line-clamp/examples/1/index.less b/projects/demo/src/modules/components/line-clamp/examples/1/index.less
index 4cc0c405a240..f2b310500569 100644
--- a/projects/demo/src/modules/components/line-clamp/examples/1/index.less
+++ b/projects/demo/src/modules/components/line-clamp/examples/1/index.less
@@ -1,13 +1,15 @@
 @import 'taiga-ui-local';
 
-:host {
-    display: block;
-}
-
 .island {
     width: 20rem;
+    margin-bottom: 1rem;
+    box-sizing: border-box;
 }
 
 .hint {
     font: var(--tui-font-text-s);
 }
+
+.no-wrap {
+    white-space: nowrap;
+}
diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts b/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts
index 0cd51b968ada..24a5202f5666 100644
--- a/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts
+++ b/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiButtonModule} from '@taiga-ui/core';
+import {TuiButtonModule, TuiNotificationModule} from '@taiga-ui/core';
 import {TuiIslandModule, TuiLineClampModule} from '@taiga-ui/kit';
 
 import {TuiLineClampExample1} from './examples/1';
@@ -13,6 +13,7 @@ import {ExampleTuiLineClampComponent} from './line-clamp.component';
 @NgModule({
     imports: [
         CommonModule,
+        TuiNotificationModule,
         TuiLineClampModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiLineClampComponent)),
diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html b/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
index 8d7d289d4363..cfa588878770 100644
--- a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
+++ b/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
@@ -4,7 +4,7 @@
     type="components"
 >
     <ng-template pageTab>
-        <p i18n>Component cuts overflowed text with "..." and shows it by hover</p>
+        <p i18n>Component cuts overflown text with "..." and shows it by hover</p>
 
         <tui-doc-example
             id="basic"
diff --git a/projects/demo/src/modules/components/multi-select/multi-select.template.html b/projects/demo/src/modules/components/multi-select/multi-select.template.html
index 6773a85a314b..9e51662dd3b3 100644
--- a/projects/demo/src/modules/components/multi-select/multi-select.template.html
+++ b/projects/demo/src/modules/components/multi-select/multi-select.template.html
@@ -107,7 +107,7 @@
                     [tuiTextfieldSize]="size"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                     [focusable]="focusable"
                     [disabledItemHandler]="disabledItemHandler"
                     [editable]="editable"
diff --git a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts
index ab2059847e4e..d31a054f85d0 100644
--- a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts
+++ b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts
@@ -8,8 +8,7 @@ import {
     TuiInputType,
 } from '@taiga-ui/cdk';
 import {
-    TuiDirection,
-    TuiHintMode,
+    TUI_HINT_DIRECTIONS,
     TuiHorizontalDirection,
     TuiSizeL,
     TuiSizeS,
@@ -146,26 +145,17 @@ export class ExampleTuiPrimitiveTextfieldComponent extends AbstractExampleTuiInt
 
     readonly hintContentVariants: readonly string[] = [`Ivan Ivanov`];
 
-    readonly hintDirectionVariants: readonly TuiDirection[] = [
-        `left`,
-        `right`,
-        `bottom-left`,
-        `bottom-right`,
-        `bottom-middle`,
-        `top-left`,
-        `top-right`,
-        `top-middle`,
-    ];
+    readonly hintDirectionVariants = TUI_HINT_DIRECTIONS;
 
-    readonly hintModeVariants: readonly TuiHintMode[] = [`error`, `onDark`];
+    readonly hintAppearanceVariants = [``, `error`, `onDark`];
 
     invalid = false;
 
     hintContent = null;
 
-    hintDirection: TuiDirection = this.hintDirectionVariants[2];
+    hintDirection = this.hintDirectionVariants[0];
 
-    hintMode: TuiHintMode | null = null;
+    hintAppearance = this.hintAppearanceVariants[0];
 
     get customContent(): string | null {
         return this.customContentSelected === CUSTOM_SVG_NAME
diff --git a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
index bcde9c011c60..49018bf921da 100644
--- a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
+++ b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
@@ -78,7 +78,7 @@
                 [invalid]="invalid"
                 [tuiHintContent]="hintContent"
                 [tuiHintDirection]="hintDirection"
-                [tuiHintMode]="hintMode"
+                [tuiHintAppearance]="hintAppearance"
                 [(value)]="value"
             >
                 Component label
diff --git a/projects/demo/src/modules/components/select/select.template.html b/projects/demo/src/modules/components/select/select.template.html
index e202e843c82a..76082a2bab98 100644
--- a/projects/demo/src/modules/components/select/select.template.html
+++ b/projects/demo/src/modules/components/select/select.template.html
@@ -129,7 +129,7 @@
                     [tuiTextfieldSize]="size"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiHintMode]="hintMode"
+                    [tuiHintAppearance]="hintAppearance"
                 >
                     Choose an account
                     <tui-data-list-wrapper
diff --git a/projects/demo/src/modules/components/slider/examples/6/index.html b/projects/demo/src/modules/components/slider/examples/6/index.html
index e30cb32d898a..8a06b0bc9cb4 100644
--- a/projects/demo/src/modules/components/slider/examples/6/index.html
+++ b/projects/demo/src/modules/components/slider/examples/6/index.html
@@ -13,10 +13,10 @@
         class="slider-wrapper"
     >
         <div
-            tuiHintMode="onDark"
-            tuiHintDirection="top-middle"
-            [tuiManualHint]="hint"
-            [tuiManualHintShow]="!!(showHint$ | async)"
+            tuiHintAppearance="onDark"
+            tuiHintDirection="top"
+            [tuiHint]="hint"
+            [tuiHintManual]="!!(showHint$ | async)"
         ></div>
 
         <ng-template #hint>
diff --git a/projects/demo/src/modules/components/slider/slider.module.ts b/projects/demo/src/modules/components/slider/slider.module.ts
index 4a53c2423d8c..ce2ef794b3e9 100644
--- a/projects/demo/src/modules/components/slider/slider.module.ts
+++ b/projects/demo/src/modules/components/slider/slider.module.ts
@@ -5,8 +5,8 @@ import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {
     TuiButtonModule,
+    TuiHintModule,
     TuiLinkModule,
-    TuiManualHintModule,
     TuiModeModule,
     TuiNotificationModule,
 } from '@taiga-ui/core';
@@ -31,7 +31,7 @@ import {ExampleTuiSliderComponent} from './slider.component';
         TuiNotificationModule,
         TuiModeModule,
         TuiButtonModule,
-        TuiManualHintModule,
+        TuiHintModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSliderComponent)),
     ],
     declarations: [
diff --git a/projects/demo/src/modules/components/text-area/text-area.template.html b/projects/demo/src/modules/components/text-area/text-area.template.html
index 20ed850cf68e..9a5240dacb3c 100644
--- a/projects/demo/src/modules/components/text-area/text-area.template.html
+++ b/projects/demo/src/modules/components/text-area/text-area.template.html
@@ -87,7 +87,7 @@
                 [rows]="rows"
                 [tuiHintContent]="hintContent"
                 [tuiHintDirection]="hintDirection"
-                [tuiHintMode]="hintMode"
+                [tuiHintAppearance]="hintAppearance"
             >
                 Textfield for multiline input. It can grow with its content.
                 <textarea
diff --git a/projects/demo/src/modules/components/tooltip/examples/2/index.html b/projects/demo/src/modules/components/tooltip/examples/2/index.html
index fca19fb55797..ae3312e368ff 100644
--- a/projects/demo/src/modules/components/tooltip/examples/2/index.html
+++ b/projects/demo/src/modules/components/tooltip/examples/2/index.html
@@ -15,7 +15,7 @@
     text="❤"
     tuiDescribedBy="love"
     tuiHintId="love"
-    tuiHintMode="onDark"
+    tuiHintAppearance="onDark"
     tuiHintDirection="right"
     [tuiHint]="tooltip"
     [autoColor]="true"
diff --git a/projects/demo/src/modules/components/tooltip/examples/4/index.ts b/projects/demo/src/modules/components/tooltip/examples/4/index.ts
index 3c3d0e4076fd..37cfec51a727 100644
--- a/projects/demo/src/modules/components/tooltip/examples/4/index.ts
+++ b/projects/demo/src/modules/components/tooltip/examples/4/index.ts
@@ -10,7 +10,7 @@ import {tuiHintOptionsProvider} from '@taiga-ui/core';
     encapsulation,
     providers: [
         tuiHintOptionsProvider({
-            tooltipIcon: `tuiIconCameraLarge`,
+            icon: `tuiIconCameraLarge`,
         }),
     ],
 })
diff --git a/projects/demo/src/modules/components/tooltip/tooltip.component.ts b/projects/demo/src/modules/components/tooltip/tooltip.component.ts
index a70511954a56..c723d3d844f5 100644
--- a/projects/demo/src/modules/components/tooltip/tooltip.component.ts
+++ b/projects/demo/src/modules/components/tooltip/tooltip.component.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiDirection, TuiHintMode} from '@taiga-ui/core';
+import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core';
 
 @Component({
     selector: `example-tooltip`,
@@ -36,22 +36,13 @@ export class ExampleTuiTooltipComponent {
 
     readonly exampleHtml = import(`./examples/import/insert-template.md?raw`);
 
-    readonly modeVariants: readonly TuiHintMode[] = [`error`];
+    readonly appearanceVariants = [``, `error`];
 
-    mode: TuiHintMode | null = null;
+    appearance = this.appearanceVariants[0];
 
-    directionVariants: readonly TuiDirection[] = [
-        `left`,
-        `right`,
-        `bottom-left`,
-        `bottom-right`,
-        `bottom-middle`,
-        `top-left`,
-        `top-right`,
-        `top-middle`,
-    ];
+    directionVariants = TUI_HINT_DIRECTIONS;
 
-    direction: TuiDirection = this.directionVariants[2];
+    direction = this.directionVariants[0];
 
     describeId = ``;
 
diff --git a/projects/demo/src/modules/components/tooltip/tooltip.template.html b/projects/demo/src/modules/components/tooltip/tooltip.template.html
index fbf82b0a5b4a..4a6f84d1c95a 100644
--- a/projects/demo/src/modules/components/tooltip/tooltip.template.html
+++ b/projects/demo/src/modules/components/tooltip/tooltip.template.html
@@ -44,7 +44,7 @@
         <tui-doc-demo>
             <tui-tooltip
                 content="You data is hidden"
-                [mode]="mode"
+                [appearance]="appearance"
                 [describeId]="describeId"
                 [direction]="direction"
                 [showDelay]="showDelay"
@@ -56,6 +56,16 @@
             />
         </tui-doc-demo>
         <tui-doc-documentation>
+            <ng-template
+                i18n
+                documentationPropertyName="appearance"
+                documentationPropertyMode="input"
+                documentationPropertyType="string"
+                [documentationPropertyValues]="appearanceVariants"
+                [(documentationPropertyValue)]="appearance"
+            >
+                Hint appearance
+            </ng-template>
             <ng-template
                 i18n
                 documentationPropertyName="content"
@@ -78,16 +88,6 @@
                 <code>[tuiDescribedBy]="theSameId"</code>
                 directive on focusable element
             </ng-template>
-            <ng-template
-                i18n
-                documentationPropertyName="mode"
-                documentationPropertyMode="input"
-                documentationPropertyType="TuiTooltipMode | null"
-                [documentationPropertyValues]="modeVariants"
-                [(documentationPropertyValue)]="mode"
-            >
-                Tooltip mode
-            </ng-template>
             <ng-template
                 i18n
                 documentationPropertyName="direction"
diff --git a/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts b/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
index 32d6622600b6..fabd35a2cb25 100644
--- a/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
+++ b/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiDirection, TuiHintMode} from '@taiga-ui/core';
+import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core';
 
 @Component({
     selector: `example-tui-hint-controller`,
@@ -17,24 +17,15 @@ export class ExampleTuiHintControllerComponent {
         HTML: import(`./examples/1/index.html?raw`),
     };
 
-    readonly modeVariants: readonly TuiHintMode[] = [`error`];
+    readonly appearanceVariants = [``, `error`];
 
     tuiHintContent = `Example hint content`;
 
-    tuiHintMode: TuiHintMode | null = null;
+    tuiHintAppearance = this.appearanceVariants[0];
 
-    readonly directionVariants: readonly TuiDirection[] = [
-        `left`,
-        `right`,
-        `bottom-left`,
-        `bottom-right`,
-        `bottom-middle`,
-        `top-left`,
-        `top-right`,
-        `top-middle`,
-    ];
+    readonly directionVariants = TUI_HINT_DIRECTIONS;
 
-    tuiHintDirection: TuiDirection = this.directionVariants[2];
+    tuiHintDirection = this.directionVariants[0];
 
     tuiHintShowDelay = 500;
 
diff --git a/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html b/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html
index ef8b71518551..13d9db284e79 100644
--- a/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html
+++ b/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html
@@ -34,7 +34,7 @@
                 class="wrapper"
                 [tuiHintContent]="tuiHintContent"
                 [tuiHintDirection]="tuiHintDirection"
-                [tuiHintMode]="tuiHintMode"
+                [tuiHintAppearance]="tuiHintAppearance"
                 [tuiHintShowDelay]="tuiHintShowDelay"
                 [tuiHintHideDelay]="tuiHintHideDelay"
             >
@@ -52,11 +52,11 @@
             </ng-template>
             <ng-template
                 i18n
-                documentationPropertyName="tuiHintMode"
+                documentationPropertyName="tuiHintAppearance"
                 documentationPropertyMode="input"
-                documentationPropertyType="TuiTooltipMode | null"
-                [documentationPropertyValues]="modeVariants"
-                [(documentationPropertyValue)]="tuiHintMode"
+                documentationPropertyType="string"
+                [documentationPropertyValues]="appearanceVariants"
+                [(documentationPropertyValue)]="tuiHintAppearance"
             >
                 Hint controller mode
             </ng-template>
diff --git a/projects/demo/src/modules/directives/manual-hint/examples/1/index.html b/projects/demo/src/modules/directives/hint-manual/examples/1/index.html
similarity index 81%
rename from projects/demo/src/modules/directives/manual-hint/examples/1/index.html
rename to projects/demo/src/modules/directives/hint-manual/examples/1/index.html
index d8d4f64e38fc..9e2a319d7af9 100644
--- a/projects/demo/src/modules/directives/manual-hint/examples/1/index.html
+++ b/projects/demo/src/modules/directives/hint-manual/examples/1/index.html
@@ -1,8 +1,8 @@
 <button
     tuiButton
     type="button"
-    [tuiManualHint]="template"
-    [tuiManualHintShow]="hintShown"
+    [tuiHint]="template"
+    [tuiHintManual]="hintShown"
     (click)="toggleHint()"
 >
     Hint
diff --git a/projects/demo/src/modules/directives/manual-hint/examples/1/index.less b/projects/demo/src/modules/directives/hint-manual/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/directives/manual-hint/examples/1/index.less
rename to projects/demo/src/modules/directives/hint-manual/examples/1/index.less
diff --git a/projects/demo/src/modules/directives/manual-hint/examples/1/index.ts b/projects/demo/src/modules/directives/hint-manual/examples/1/index.ts
similarity index 79%
rename from projects/demo/src/modules/directives/manual-hint/examples/1/index.ts
rename to projects/demo/src/modules/directives/hint-manual/examples/1/index.ts
index e3ce8a3a63e0..8650b7d86ec9 100644
--- a/projects/demo/src/modules/directives/manual-hint/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/hint-manual/examples/1/index.ts
@@ -2,12 +2,12 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 
 @Component({
-    selector: `tui-manual-hint-example-1`,
+    selector: `tui-hint-manual-example-1`,
     templateUrl: `./index.html`,
     styleUrls: [`./index.less`],
     changeDetection,
 })
-export class TuiManualHintExample1 {
+export class TuiHintManualExample1 {
     hintShown = false;
 
     toggleHint(): void {
diff --git a/projects/demo/src/modules/directives/manual-hint/examples/import/import-module.md b/projects/demo/src/modules/directives/hint-manual/examples/import/import-module.md
similarity index 55%
rename from projects/demo/src/modules/directives/manual-hint/examples/import/import-module.md
rename to projects/demo/src/modules/directives/hint-manual/examples/import/import-module.md
index 3b720062ba7c..6fdf8ae62af9 100644
--- a/projects/demo/src/modules/directives/manual-hint/examples/import/import-module.md
+++ b/projects/demo/src/modules/directives/hint-manual/examples/import/import-module.md
@@ -1,12 +1,12 @@
 ```ts
-import {TuiManualHintModule} from '@taiga-ui/core';
+import {TuiHintModule} from '@taiga-ui/core';
 
 // ...
 
 @NgModule({
   imports: [
     // ...
-    TuiManualHintModule,
+    TuiHintModule,
   ],
   // ...
 })
diff --git a/projects/demo/src/modules/directives/manual-hint/examples/import/insert-template.md b/projects/demo/src/modules/directives/hint-manual/examples/import/insert-template.md
similarity index 58%
rename from projects/demo/src/modules/directives/manual-hint/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/hint-manual/examples/import/insert-template.md
index a23b26d7c303..78e8181b293b 100644
--- a/projects/demo/src/modules/directives/manual-hint/examples/import/insert-template.md
+++ b/projects/demo/src/modules/directives/hint-manual/examples/import/insert-template.md
@@ -2,8 +2,8 @@
 <button
   tuiButton
   type="button"
-  tuiManualHint="Custom host with text tooltip"
-  [tuiManualHintShow]="true"
+  tuiHint="Custom host with text tooltip"
+  [tuiHintManual]="true"
 >
   Press me
 </button>
@@ -11,8 +11,8 @@
 <button
   tuiButton
   type="button"
-  [tuiManualHint]="template"
-  [tuiManualHintShow]="true"
+  [tuiHint]="template"
+  [tuiHintManual]="true"
 >
   Press that ↑
 </button>
diff --git a/projects/demo/src/modules/directives/manual-hint/manual-hint.component.ts b/projects/demo/src/modules/directives/hint-manual/hint-manual.component.ts
similarity index 80%
rename from projects/demo/src/modules/directives/manual-hint/manual-hint.component.ts
rename to projects/demo/src/modules/directives/hint-manual/hint-manual.component.ts
index 258143f32985..6be4328a19f4 100644
--- a/projects/demo/src/modules/directives/manual-hint/manual-hint.component.ts
+++ b/projects/demo/src/modules/directives/hint-manual/hint-manual.component.ts
@@ -6,17 +6,17 @@ import {AbstractExampleTuiHint} from '../../components/abstract/hint';
 import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
 
 @Component({
-    selector: `example-manual-hint`,
-    templateUrl: `./manual-hint.template.html`,
+    selector: `example-hint-manual`,
+    templateUrl: `./hint-manual.template.html`,
     changeDetection,
     providers: [
         {
             provide: ABSTRACT_PROPS_ACCESSOR,
-            useExisting: forwardRef(() => ExampleTuiManualHintComponent),
+            useExisting: forwardRef(() => ExampleTuiHintManualComponent),
         },
     ],
 })
-export class ExampleTuiManualHintComponent extends AbstractExampleTuiHint {
+export class ExampleTuiHintManualComponent extends AbstractExampleTuiHint {
     readonly exampleModule = import(`./examples/import/import-module.md?raw`);
     readonly exampleHtml = import(`./examples/import/insert-template.md?raw`);
 
diff --git a/projects/demo/src/modules/directives/manual-hint/manual-hint.module.ts b/projects/demo/src/modules/directives/hint-manual/hint-manual.module.ts
similarity index 64%
rename from projects/demo/src/modules/directives/manual-hint/manual-hint.module.ts
rename to projects/demo/src/modules/directives/hint-manual/hint-manual.module.ts
index e96a4835cbf1..207154c013b8 100644
--- a/projects/demo/src/modules/directives/manual-hint/manual-hint.module.ts
+++ b/projects/demo/src/modules/directives/hint-manual/hint-manual.module.ts
@@ -4,29 +4,29 @@ import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {
     TuiButtonModule,
+    TuiHintModule,
     TuiLinkModule,
-    TuiManualHintModule,
     TuiModeModule,
 } from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {InheritedDocumentationModule} from '../../components/abstract/inherited-documentation/inherited-documentation.module';
-import {TuiManualHintExample1} from './examples/1';
-import {ExampleTuiManualHintComponent} from './manual-hint.component';
+import {TuiHintManualExample1} from './examples/1';
+import {ExampleTuiHintManualComponent} from './hint-manual.component';
 
 @NgModule({
     imports: [
         TuiButtonModule,
-        TuiManualHintModule,
+        TuiHintModule,
         TuiLinkModule,
         TuiModeModule,
         PolymorpheusModule,
         CommonModule,
         InheritedDocumentationModule,
         TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiManualHintComponent)),
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiHintManualComponent)),
     ],
-    declarations: [ExampleTuiManualHintComponent, TuiManualHintExample1],
-    exports: [ExampleTuiManualHintComponent],
+    declarations: [ExampleTuiHintManualComponent, TuiHintManualExample1],
+    exports: [ExampleTuiHintManualComponent],
 })
-export class ExampleTuiManualHintModule {}
+export class ExampleTuiHintManualModule {}
diff --git a/projects/demo/src/modules/directives/manual-hint/manual-hint.template.html b/projects/demo/src/modules/directives/hint-manual/hint-manual.template.html
similarity index 82%
rename from projects/demo/src/modules/directives/manual-hint/manual-hint.template.html
rename to projects/demo/src/modules/directives/hint-manual/hint-manual.template.html
index fb37c475192e..a793b6ec3b33 100644
--- a/projects/demo/src/modules/directives/manual-hint/manual-hint.template.html
+++ b/projects/demo/src/modules/directives/hint-manual/hint-manual.template.html
@@ -1,5 +1,5 @@
 <tui-doc-page
-    header="ManualHint"
+    header="HintManual"
     package="CORE"
     type="directives"
 >
@@ -12,7 +12,7 @@
             heading="Basic"
             [content]="example1"
         >
-            <tui-manual-hint-example-1></tui-manual-hint-example-1>
+            <tui-hint-manual-example-1></tui-hint-manual-example-1>
         </tui-doc-example>
     </ng-template>
 
@@ -21,9 +21,9 @@
             <button
                 tuiButton
                 type="button"
-                tuiManualHint="It says 'Hi all!' into console"
-                [tuiManualHintShow]="show"
-                [tuiHintMode]="mode"
+                tuiHint="It says 'Hi all!' into console"
+                [tuiHintManual]="show"
+                [tuiHintAppearance]="appearance"
                 [tuiHintDirection]="direction"
                 (click)="sayHi()"
             >
@@ -33,7 +33,7 @@
         <tui-doc-documentation>
             <ng-template
                 i18n
-                documentationPropertyName="tuiManualHint"
+                documentationPropertyName="tuiHint"
                 documentationPropertyMode="input"
                 documentationPropertyType="PolymorpheusContent"
             >
@@ -41,7 +41,7 @@
             </ng-template>
             <ng-template
                 i18n
-                documentationPropertyName="tuiManualHintShow"
+                documentationPropertyName="tuiHintManual"
                 documentationPropertyMode="input"
                 documentationPropertyType="boolean"
                 [(documentationPropertyValue)]="show"
@@ -57,7 +57,7 @@
             <li>
                 <p i18n>
                     Import
-                    <code>TuiManualHintModule</code>
+                    <code>TuiHintModule</code>
                     into a module where you want to use our component
                 </p>
 
diff --git a/projects/demo/src/modules/directives/pointer-hint/examples/1/index.html b/projects/demo/src/modules/directives/hint-pointer/examples/1/index.html
similarity index 70%
rename from projects/demo/src/modules/directives/pointer-hint/examples/1/index.html
rename to projects/demo/src/modules/directives/hint-pointer/examples/1/index.html
index 112d2fcec0a8..5eaba5b4ece3 100644
--- a/projects/demo/src/modules/directives/pointer-hint/examples/1/index.html
+++ b/projects/demo/src/modules/directives/hint-pointer/examples/1/index.html
@@ -1,5 +1,6 @@
 <tui-island
-    tuiPointerHint="Wow! How exciting!"
+    tuiHintPointer
+    tuiHint="Wow! How exciting!"
     tuiHintDirection="top-left"
     class="block"
 >
diff --git a/projects/demo/src/modules/directives/pointer-hint/examples/1/index.less b/projects/demo/src/modules/directives/hint-pointer/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/directives/pointer-hint/examples/1/index.less
rename to projects/demo/src/modules/directives/hint-pointer/examples/1/index.less
diff --git a/projects/demo/src/modules/directives/pointer-hint/examples/1/index.ts b/projects/demo/src/modules/directives/hint-pointer/examples/1/index.ts
similarity index 71%
rename from projects/demo/src/modules/directives/pointer-hint/examples/1/index.ts
rename to projects/demo/src/modules/directives/hint-pointer/examples/1/index.ts
index ab2576ea45b0..297944d13c3a 100644
--- a/projects/demo/src/modules/directives/pointer-hint/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/hint-pointer/examples/1/index.ts
@@ -2,9 +2,9 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 
 @Component({
-    selector: `tui-pointer-hint-example-1`,
+    selector: `tui-hint-pointer-example-1`,
     templateUrl: `./index.html`,
     styleUrls: [`./index.less`],
     changeDetection,
 })
-export class TuiPointerHintExample1 {}
+export class TuiHintPointerExample1 {}
diff --git a/projects/demo/src/modules/directives/pointer-hint/examples/import/import-module.md b/projects/demo/src/modules/directives/hint-pointer/examples/import/import-module.md
similarity index 100%
rename from projects/demo/src/modules/directives/pointer-hint/examples/import/import-module.md
rename to projects/demo/src/modules/directives/hint-pointer/examples/import/import-module.md
diff --git a/projects/demo/src/modules/directives/hint-pointer/examples/import/insert-template.md b/projects/demo/src/modules/directives/hint-pointer/examples/import/insert-template.md
new file mode 100644
index 000000000000..44214306a4b4
--- /dev/null
+++ b/projects/demo/src/modules/directives/hint-pointer/examples/import/insert-template.md
@@ -0,0 +1,8 @@
+```html
+<div
+  tuiHintPointer
+  tuiHint="Hint text"
+>
+  Block with pointer hint
+</div>
+```
diff --git a/projects/demo/src/modules/directives/pointer-hint/pointer-hint.component.ts b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.component.ts
similarity index 80%
rename from projects/demo/src/modules/directives/pointer-hint/pointer-hint.component.ts
rename to projects/demo/src/modules/directives/hint-pointer/hint-pointer.component.ts
index 1db1ea36d635..415550a0b5ea 100644
--- a/projects/demo/src/modules/directives/pointer-hint/pointer-hint.component.ts
+++ b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.component.ts
@@ -6,17 +6,17 @@ import {AbstractExampleTuiHint} from '../../components/abstract/hint';
 import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
 
 @Component({
-    selector: `example-pointer-hint`,
-    templateUrl: `./pointer-hint.template.html`,
+    selector: `example-hint-pointer`,
+    templateUrl: `./hint-pointer.template.html`,
     changeDetection,
     providers: [
         {
             provide: ABSTRACT_PROPS_ACCESSOR,
-            useExisting: forwardRef(() => ExampleTuiPointerHintComponent),
+            useExisting: forwardRef(() => ExampleTuiHintPointerComponent),
         },
     ],
 })
-export class ExampleTuiPointerHintComponent extends AbstractExampleTuiHint {
+export class ExampleTuiHintPointerComponent extends AbstractExampleTuiHint {
     readonly exampleModule = import(`./examples/import/import-module.md?raw`);
     readonly exampleHtml = import(`./examples/import/insert-template.md?raw`);
 
diff --git a/projects/demo/src/modules/directives/pointer-hint/pointer-hint.module.ts b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts
similarity index 58%
rename from projects/demo/src/modules/directives/pointer-hint/pointer-hint.module.ts
rename to projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts
index 0c5b63df3fed..17a8ebe53819 100644
--- a/projects/demo/src/modules/directives/pointer-hint/pointer-hint.module.ts
+++ b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts
@@ -2,17 +2,17 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiModeModule, TuiPointerHintModule} from '@taiga-ui/core';
+import {TuiHintModule, TuiLinkModule, TuiModeModule} from '@taiga-ui/core';
 import {TuiIslandModule} from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {InheritedDocumentationModule} from '../../components/abstract/inherited-documentation/inherited-documentation.module';
-import {TuiPointerHintExample1} from './examples/1';
-import {ExampleTuiPointerHintComponent} from './pointer-hint.component';
+import {TuiHintPointerExample1} from './examples/1';
+import {ExampleTuiHintPointerComponent} from './hint-pointer.component';
 
 @NgModule({
     imports: [
-        TuiPointerHintModule,
+        TuiHintModule,
         TuiIslandModule,
         TuiLinkModule,
         TuiModeModule,
@@ -20,9 +20,9 @@ import {ExampleTuiPointerHintComponent} from './pointer-hint.component';
         CommonModule,
         InheritedDocumentationModule,
         TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiPointerHintComponent)),
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiHintPointerComponent)),
     ],
-    declarations: [ExampleTuiPointerHintComponent, TuiPointerHintExample1],
-    exports: [ExampleTuiPointerHintComponent],
+    declarations: [ExampleTuiHintPointerComponent, TuiHintPointerExample1],
+    exports: [ExampleTuiHintPointerComponent],
 })
-export class ExampleTuiPointerHintModule {}
+export class ExampleTuiHintPointerModule {}
diff --git a/projects/demo/src/modules/directives/pointer-hint/pointer-hint.template.html b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.template.html
similarity index 90%
rename from projects/demo/src/modules/directives/pointer-hint/pointer-hint.template.html
rename to projects/demo/src/modules/directives/hint-pointer/hint-pointer.template.html
index cb9a3f4cf393..164764c53902 100644
--- a/projects/demo/src/modules/directives/pointer-hint/pointer-hint.template.html
+++ b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.template.html
@@ -1,6 +1,6 @@
 <tui-doc-page
     i18n-header
-    header="PointerHint"
+    header="HintPointer"
     package="CORE"
     type="directives"
 >
@@ -13,7 +13,7 @@
             heading="Basic"
             [content]="example1"
         >
-            <tui-pointer-hint-example-1></tui-pointer-hint-example-1>
+            <tui-hint-pointer-example-1></tui-hint-pointer-example-1>
         </tui-doc-example>
     </ng-template>
 
@@ -21,8 +21,9 @@
         <tui-doc-demo>
             <div
                 i18n
-                tuiPointerHint="Some information"
-                [tuiHintMode]="mode"
+                tuiHintPointer
+                tuiHint="Some information"
+                [tuiHintAppearance]="appearance"
                 [tuiHintDirection]="direction"
                 [tuiHintShowDelay]="showDelay"
                 [tuiHintHideDelay]="hideDelay"
@@ -33,7 +34,7 @@
         <tui-doc-documentation>
             <ng-template
                 i18n
-                documentationPropertyName="tuiPointerHint"
+                documentationPropertyName="tuiHint"
                 documentationPropertyMode="input"
                 documentationPropertyType="PolymorpheusContent"
             >
diff --git a/projects/demo/src/modules/directives/hint/examples/1/index.html b/projects/demo/src/modules/directives/hint/examples/1/index.html
index b8f6f2724d7c..d76079fd4f4d 100644
--- a/projects/demo/src/modules/directives/hint/examples/1/index.html
+++ b/projects/demo/src/modules/directives/hint/examples/1/index.html
@@ -1,7 +1,7 @@
 <tui-avatar
     size="l"
     text="❤"
-    tuiHintMode="onDark"
+    tuiHintAppearance="onDark"
     tuiHintDirection="right"
     [tuiHint]="tooltip"
     [autoColor]="true"
diff --git a/projects/demo/src/modules/directives/hint/hint.template.html b/projects/demo/src/modules/directives/hint/hint.template.html
index dad9e05b14bf..6bfacc882327 100644
--- a/projects/demo/src/modules/directives/hint/hint.template.html
+++ b/projects/demo/src/modules/directives/hint/hint.template.html
@@ -19,8 +19,8 @@
     <ng-template pageTab>
         <tui-doc-demo>
             <span
-                tuiHint="Your data is hidden"
-                [tuiHintMode]="mode"
+                tuiHint="To be accessible, hint should be set to a focusable element"
+                [tuiHintAppearance]="appearance"
                 [tuiHintId]="id"
                 [tuiHintDirection]="direction"
                 [tuiHintShowDelay]="showDelay"
diff --git a/projects/demo/src/modules/directives/pointer-hint/examples/import/insert-template.md b/projects/demo/src/modules/directives/pointer-hint/examples/import/insert-template.md
deleted file mode 100644
index ad8ba5a0ad44..000000000000
--- a/projects/demo/src/modules/directives/pointer-hint/examples/import/insert-template.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<div tuiPointerHint>Block with pointer hint</div>
-```
diff --git a/projects/kit/components/input-copy/input-copy.component.ts b/projects/kit/components/input-copy/input-copy.component.ts
index ddc66b5139dd..f5ab08793b98 100644
--- a/projects/kit/components/input-copy/input-copy.component.ts
+++ b/projects/kit/components/input-copy/input-copy.component.ts
@@ -20,8 +20,7 @@ import {
 } from '@taiga-ui/cdk';
 import {
     TUI_TEXTFIELD_SIZE,
-    TuiDirection,
-    TuiHintMode,
+    TuiHintDirection,
     TuiPrimitiveTextfieldComponent,
     TuiTextfieldSizeDirective,
 } from '@taiga-ui/core';
@@ -54,11 +53,11 @@ export class TuiInputCopyComponent
 
     @Input()
     @tuiDefaultProp()
-    messageDirection: TuiDirection = `bottom-left`;
+    messageDirection: TuiHintDirection = `bottom-left`;
 
     @Input()
     @tuiDefaultProp()
-    messageMode: TuiHintMode | null = null;
+    messageAppearance = ``;
 
     constructor(
         @Optional()
diff --git a/projects/kit/components/input-copy/input-copy.template.html b/projects/kit/components/input-copy/input-copy.template.html
index 5073a944d5db..a6f32a9931a7 100644
--- a/projects/kit/components/input-copy/input-copy.template.html
+++ b/projects/kit/components/input-copy/input-copy.template.html
@@ -27,7 +27,7 @@
         class="icon"
         [tuiHint]="hint"
         [tuiHintDirection]="messageDirection"
-        [tuiHintMode]="messageMode"
+        [tuiHintAppearance]="messageAppearance"
         [src]="icon"
         (click)="copy()"
     ></tui-svg>
diff --git a/projects/kit/components/input-password/input-password.component.ts b/projects/kit/components/input-password/input-password.component.ts
index 5fe8d77d48b6..ed4dc5f9c59c 100644
--- a/projects/kit/components/input-password/input-password.component.ts
+++ b/projects/kit/components/input-password/input-password.component.ts
@@ -26,7 +26,6 @@ import {
     TUI_TEXTFIELD_SIZE,
     TuiBrightness,
     TuiHintControllerDirective,
-    TuiHintMode,
     TuiPrimitiveTextfieldComponent,
     TuiSizeL,
     TuiSizeS,
@@ -69,15 +68,15 @@ export class TuiInputPasswordComponent
 
     isPasswordHidden = true;
 
-    readonly computedMode$: Observable<TuiHintMode | null> = combineLatest([
-        this.mode$.pipe(map(val => (val === `onDark` ? `onDark` : null))),
+    readonly computedAppearance$: Observable<string> = combineLatest([
+        this.mode$.pipe(map(val => (val === `onDark` ? `onDark` : ``))),
         this.hintController.change$.pipe(
             startWith(null),
-            map(() => this.hintController.mode),
+            map(() => this.hintController.appearance),
         ),
     ]).pipe(
         map(([mode, controller]) => controller || mode),
-        startWith(null),
+        startWith(``),
     );
 
     readonly type!: TuiContextWithImplicit<TuiSizeS | TuiSizeL>;
diff --git a/projects/kit/components/input-password/input-password.template.html b/projects/kit/components/input-password/input-password.template.html
index 978574713965..34d7bfb5ac30 100644
--- a/projects/kit/components/input-password/input-password.template.html
+++ b/projects/kit/components/input-password/input-password.template.html
@@ -33,7 +33,7 @@
             class="icon"
             [tuiHint]="texts[0] && texts[1] && hintContent"
             [tuiHintDirection]="hintController.direction"
-            [tuiHintMode]="computedMode$ | async"
+            [tuiHintAppearance]="(computedAppearance$ | async) || ''"
             [src]="src"
             (click)="togglePasswordVisibility()"
         ></tui-svg>
diff --git a/projects/kit/components/input-tag/input-tag.template.html b/projects/kit/components/input-tag/input-tag.template.html
index 6aa056d4e390..a4ba9375bd78 100644
--- a/projects/kit/components/input-tag/input-tag.template.html
+++ b/projects/kit/components/input-tag/input-tag.template.html
@@ -126,7 +126,7 @@
                     describeId="placeholer_until_accesibility_is_added"
                     class="t-tooltip"
                     [direction]="hintController.direction"
-                    [mode]="hintController.mode"
+                    [appearance]="hintController.appearance"
                     [content]="hintController.content || ''"
                     [showDelay]="hintController.showDelay"
                     [hideDelay]="hintController.hideDelay"
diff --git a/projects/kit/components/line-clamp/index.ts b/projects/kit/components/line-clamp/index.ts
index d688e7bc19d2..6504c862128e 100644
--- a/projects/kit/components/line-clamp/index.ts
+++ b/projects/kit/components/line-clamp/index.ts
@@ -1,3 +1,4 @@
 export * from './line-clamp.component';
 export * from './line-clamp.module';
+export * from './line-clamp-box/line-clamp-box.component';
 export * from './line-clamp-options';
diff --git a/projects/kit/components/line-clamp/line-clamp-box/line-clamp-box.component.ts b/projects/kit/components/line-clamp/line-clamp-box/line-clamp-box.component.ts
new file mode 100644
index 000000000000..310c602e357e
--- /dev/null
+++ b/projects/kit/components/line-clamp/line-clamp-box/line-clamp-box.component.ts
@@ -0,0 +1,19 @@
+import {ChangeDetectionStrategy, Component, HostBinding} from '@angular/core';
+import {TuiDestroyService, TuiHoveredService} from '@taiga-ui/cdk';
+import {TuiHintComponent, TuiPositionService} from '@taiga-ui/core';
+import {tuiFadeIn} from '@taiga-ui/core/animations';
+
+@Component({
+    selector: `tui-line-clamp-box`,
+    templateUrl: `./line-clamp-box.template.html`,
+    styleUrls: [`./line-clamp-box.style.less`],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TuiDestroyService, TuiPositionService, TuiHoveredService],
+    animations: [tuiFadeIn],
+})
+export class TuiLineClampBoxComponent extends TuiHintComponent {
+    @HostBinding(`style.minWidth.px`)
+    get width(): number {
+        return this.accessor.getClientRect().width;
+    }
+}
diff --git a/projects/kit/components/line-clamp/line-clamp-box/line-clamp-box.style.less b/projects/kit/components/line-clamp/line-clamp-box/line-clamp-box.style.less
new file mode 100644
index 000000000000..d50e844b6605
--- /dev/null
+++ b/projects/kit/components/line-clamp/line-clamp-box/line-clamp-box.style.less
@@ -0,0 +1,16 @@
+@import 'taiga-ui-local';
+
+:host {
+    .shadow(2);
+    position: absolute;
+    width: min-content;
+    padding: 0.75rem 1rem;
+    margin-left: calc(-1px - 1rem);
+    margin-top: calc(-1px - 0.75rem);
+    border-radius: var(--tui-radius-l);
+    box-sizing: content-box;
+    border: 1px solid var(--tui-base-03);
+    background: var(--tui-base-01);
+    color: var(--tui-text-01);
+    word-wrap: break-word;
+}
diff --git a/projects/kit/components/line-clamp/line-clamp-box/line-clamp-box.template.html b/projects/kit/components/line-clamp/line-clamp-box/line-clamp-box.template.html
new file mode 100644
index 000000000000..ddd2b09af3ef
--- /dev/null
+++ b/projects/kit/components/line-clamp/line-clamp-box/line-clamp-box.template.html
@@ -0,0 +1 @@
+<ng-container *polymorpheusOutlet="content as text">{{ text }}</ng-container>
diff --git a/projects/kit/components/line-clamp/line-clamp-position.directive.ts b/projects/kit/components/line-clamp/line-clamp-position.directive.ts
new file mode 100644
index 000000000000..5a8a2d5c13ce
--- /dev/null
+++ b/projects/kit/components/line-clamp/line-clamp-position.directive.ts
@@ -0,0 +1,21 @@
+import {Directive, Inject} from '@angular/core';
+import {
+    tuiAsPositionAccessor,
+    TuiPoint,
+    TuiPositionAccessor,
+    TuiRectAccessor,
+} from '@taiga-ui/core';
+
+@Directive({
+    selector: `[tuiHintCustomPosition]`,
+    providers: [tuiAsPositionAccessor(TuiLineClampPositionDirective)],
+})
+export class TuiLineClampPositionDirective implements TuiPositionAccessor {
+    constructor(@Inject(TuiRectAccessor) private readonly accessor: TuiRectAccessor) {}
+
+    getPosition(): TuiPoint {
+        const {top, left} = this.accessor.getClientRect();
+
+        return [top, left];
+    }
+}
diff --git a/projects/kit/components/line-clamp/line-clamp.component.ts b/projects/kit/components/line-clamp/line-clamp.component.ts
index 9cf6feb2489c..5816cd2d106d 100644
--- a/projects/kit/components/line-clamp/line-clamp.component.ts
+++ b/projects/kit/components/line-clamp/line-clamp.component.ts
@@ -14,7 +14,7 @@ import {
     ViewChild,
 } from '@angular/core';
 import {tuiDefaultProp, tuiIsCurrentTarget, tuiPure, typedFromEvent} from '@taiga-ui/cdk';
-import {TuiHintDirective} from '@taiga-ui/core';
+import {TUI_HINT_COMPONENT, TuiHintDirective} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {BehaviorSubject, Observable, of, Subject} from 'rxjs';
 import {
@@ -26,6 +26,7 @@ import {
     switchMap,
 } from 'rxjs/operators';
 
+import {TuiLineClampBoxComponent} from './line-clamp-box/line-clamp-box.component';
 import {TUI_LINE_CLAMP_OPTIONS, TuiLineClampOptions} from './line-clamp-options';
 
 @Component({
@@ -33,6 +34,12 @@ import {TUI_LINE_CLAMP_OPTIONS, TuiLineClampOptions} from './line-clamp-options'
     templateUrl: `./line-clamp.template.html`,
     styleUrls: [`./line-clamp.style.less`],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: TUI_HINT_COMPONENT,
+            useValue: TuiLineClampBoxComponent,
+        },
+    ],
 })
 export class TuiLineClampComponent implements AfterViewInit {
     @ViewChild(TuiHintDirective, {read: ElementRef})
diff --git a/projects/kit/components/line-clamp/line-clamp.module.ts b/projects/kit/components/line-clamp/line-clamp.module.ts
index 225c636da456..8ff1eefe76e7 100644
--- a/projects/kit/components/line-clamp/line-clamp.module.ts
+++ b/projects/kit/components/line-clamp/line-clamp.module.ts
@@ -5,6 +5,8 @@ import {TuiHintModule} from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiLineClampComponent} from './line-clamp.component';
+import {TuiLineClampBoxComponent} from './line-clamp-box/line-clamp-box.component';
+import {TuiLineClampPositionDirective} from './line-clamp-position.directive';
 
 @NgModule({
     imports: [
@@ -14,7 +16,11 @@ import {TuiLineClampComponent} from './line-clamp.component';
         TuiResizeModule,
         TuiLetModule,
     ],
-    declarations: [TuiLineClampComponent],
+    declarations: [
+        TuiLineClampComponent,
+        TuiLineClampBoxComponent,
+        TuiLineClampPositionDirective,
+    ],
     exports: [TuiLineClampComponent],
 })
 export class TuiLineClampModule {}
diff --git a/projects/kit/components/line-clamp/line-clamp.style.less b/projects/kit/components/line-clamp/line-clamp.style.less
index 8cb42fd71293..e8f7e46f657a 100644
--- a/projects/kit/components/line-clamp/line-clamp.style.less
+++ b/projects/kit/components/line-clamp/line-clamp.style.less
@@ -17,4 +17,8 @@
     /* autoprefixer: ignore next */
     -webkit-box-orient: vertical;
     overflow: hidden;
+
+    ::ng-deep > * {
+        white-space: initial;
+    }
 }
diff --git a/projects/kit/components/line-clamp/line-clamp.template.html b/projects/kit/components/line-clamp/line-clamp.template.html
index 33e22af68544..bb723f81c332 100644
--- a/projects/kit/components/line-clamp/line-clamp.template.html
+++ b/projects/kit/components/line-clamp/line-clamp.template.html
@@ -1,8 +1,7 @@
 <div
     *tuiLet="lineClamp$ | async as lineClamp"
-    polymorpheus-outlet
+    tuiHintCustomPosition
     tuiHintId="unnecessary"
-    tuiHintMode="overflow"
     class="t-wrapper"
     [tuiHint]="computedContent"
     [style.-webkit-line-clamp]="lineClamp"
diff --git a/projects/kit/components/text-area/text-area.template.html b/projects/kit/components/text-area/text-area.template.html
index f9f43495e67a..676afb90f0d0 100644
--- a/projects/kit/components/text-area/text-area.template.html
+++ b/projects/kit/components/text-area/text-area.template.html
@@ -79,7 +79,7 @@
                 class="t-tooltip"
                 [describeId]="id"
                 [direction]="hintController.direction"
-                [mode]="hintController.mode"
+                [appearance]="hintController.appearance"
                 [content]="hintController.content || ''"
                 [showDelay]="hintController.showDelay"
                 [hideDelay]="hintController.hideDelay"
diff --git a/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts b/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts
index 7fa85bc27c15..632fdea08cd7 100644
--- a/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts
+++ b/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts
@@ -115,6 +115,6 @@ describe(`TuiFieldErrorContentPipe`, () => {
     }
 
     function getTooltip(): Element | null {
-        return document.querySelector(`[automation-id=tui-hint-box__tooltip]`);
+        return document.querySelector(`tui-hint`);
     }
 });