feat(core): add ability to use nested hints (#7376)

projects/core/directives/hint/hint-hover.directive.ts

@@ -1,5 +1,5 @@
 /* eslint-disable rxjs/no-unsafe-takeuntil */
-import {Directive, ElementRef, Inject, Input} from '@angular/core';
+import {Directive, ElementRef, Inject, Input, Optional, SkipSelf} from '@angular/core';
 import {TuiHoveredService} from '@taiga-ui/cdk';
 import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/abstract';
 import {tuiIsObscured} from '@taiga-ui/core/utils';
@@ -56,11 +56,16 @@ export class TuiHintHoverDirective extends TuiDriver {
         @Inject(TuiHoveredService) private readonly hovered$: Observable<boolean>,
         @Inject(TUI_HINT_OPTIONS) private readonly options: TuiHintOptions,
         @Inject(ElementRef) readonly el: ElementRef<HTMLElement>,
+        @Optional()
+        @SkipSelf()
+        @Inject(TuiHintHoverDirective)
+        private readonly parent: TuiHintHoverDirective | null,
     ) {
         super(subscriber => this.stream$.subscribe(subscriber));
     }
 
     toggle(visible = !this.visible): void {
         this.toggle$.next(visible);
+        this.parent?.toggle(visible);
     }
 }

projects/demo-playwright/tests/core/hint/hint.spec.ts

@@ -0,0 +1,112 @@
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+import type {TuiHintDirection} from '@taiga-ui/core';
+
+test.describe('TuiHint', () => {
+    test('TuiHint works', async ({page}) => {
+        await tuiGoto(page, '/directives/hint');
+        const example = new TuiDocumentationPagePO(page).getExample('#multiple');
+
+        await example.locator('tui-avatar').hover();
+
+        await expect(example).toHaveScreenshot('01-hint.png');
+    });
+
+    test.describe('Manual hint works', () => {
+        const directions: readonly TuiHintDirection[] = [
+            'bottom-left',
+            'bottom-right',
+            'bottom',
+            'left-bottom',
+            'left-top',
+            'left',
+            'right-bottom',
+            'right-top',
+            'right',
+            'top-left',
+            'top-right',
+            'top',
+        ];
+
+        directions.forEach(direction => {
+            [256, 1280].forEach(width => {
+                test(`tuiHintDirection is ${direction}, viewport width is ${width}px`, async ({
+                    page,
+                }) => {
+                    await page.setViewportSize({width, height: 300});
+                    await tuiGoto(
+                        page,
+                        `/directives/hint-manual/API?tuiHintManual=true&tuiHintDirection=${direction}`,
+                    );
+                    await new TuiDocumentationPagePO(
+                        page,
+                    ).prepareApiPageBeforeScreenshot();
+                    await expect(page).toHaveScreenshot(
+                        `02-hint-manual-direction__${direction}-and-width__${width}.png`,
+                    );
+                });
+            });
+        });
+    });
+
+    ['true', 'false'].forEach(mode => {
+        test(`${mode} mode hint without delay`, async ({page}) => {
+            await page.setViewportSize({width: 750, height: 200});
+            await tuiGoto(page, '/directives/hint/API?tuiHintShowDelay=0&tuiMode=onDark');
+            const example = new TuiDocumentationPagePO(page);
+
+            await example.prepareApiPageBeforeScreenshot();
+            await example.apiPageExample.locator('span').hover();
+
+            await expect(page).toHaveScreenshot(
+                `03-hint-mode-${mode}-tuiHintShowDelay-0.png`,
+            );
+        });
+
+        test(`${mode} mode hint with delay`, async ({page}) => {
+            await page.setViewportSize({width: 750, height: 200});
+            await tuiGoto(
+                page,
+                '/directives/hint/API?tuiHintShowDelay=1000&tuiMode=onDark',
+            );
+            const example = new TuiDocumentationPagePO(page);
+
+            await example.prepareApiPageBeforeScreenshot();
+
+            await example.apiPageExample.locator('span').hover();
+            await expect(page).toHaveScreenshot(
+                `03-hint-mode-${mode}-tuiHintShowDelay-1000__wait-0.png`,
+            );
+
+            await page.waitForTimeout(500);
+            await expect(page).toHaveScreenshot(
+                `03-hint-mode-${mode}-tuiHintShowDelay-1000_wait-500.png`,
+            );
+
+            await page.waitForTimeout(500);
+            await expect(page).toHaveScreenshot(
+                `03-hint-mode-${mode}-tuiHintShowDelay-1000_wait-1000.png`,
+            );
+        });
+    });
+
+    test('Tooltip horizontal direction', async ({page}) => {
+        await tuiGoto(page, '/components/tooltip');
+        const example = new TuiDocumentationPagePO(page).getExample('#example-base');
+
+        await example.locator('tui-tooltip').nth(0).hover();
+
+        await expect(example).toHaveScreenshot('04-tooltip-left.png');
+    });
+
+    test('Tooltip vertical direction', async ({page}) => {
+        await tuiGoto(page, '/components/tooltip');
+        const example = new TuiDocumentationPagePO(page).getExample(
+            '#repeating-template',
+        );
+
+        await example.locator('tui-tooltip').nth(0).hover();
+
+        await expect(example).toHaveScreenshot('05-tooltip-bottom.png');
+    });
+});

projects/demo/src/modules/directives/hint/examples/3/index.html

@@ -0,0 +1,17 @@
+<tui-badge
+    appearance="accent"
+    size="l"
+    class="badge tui-space_left-2"
+    [tuiHint]="badgeHint"
+    [tuiHintAppearance]="'onDark'"
+>
+    Hover me
+
+    <ng-template #badgeHint>
+        <a [tuiHint]="linkHint">
+            Hover me again
+
+            <ng-template #linkHint>Nested hint</ng-template>
+        </a>
+    </ng-template>
+</tui-badge>

projects/demo/src/modules/directives/hint/examples/3/index.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-hint-example-3',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiHintExample3 {}

projects/demo/src/modules/directives/hint/hint.component.ts

@@ -29,6 +29,10 @@ export class ExampleTuiHintComponent extends AbstractExampleTuiHint {
         LESS: import('./examples/2/index.less?raw'),
     };
 
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/3/index.html?raw'),
+    };
+
     showDelay = 500;
     hideDelay = 200;
 }

projects/demo/src/modules/directives/hint/hint.module.ts

@@ -3,11 +3,13 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiHintModule, TuiNotificationModule} from '@taiga-ui/core';
+import {TuiBadgeModule} from '@taiga-ui/experimental';
 import {TuiAvatarModule} from '@taiga-ui/kit';
 
 import {InheritedDocumentationModule} from '../../components/abstract/inherited-documentation/inherited-documentation.module';
 import {TuiHintExample1} from './examples/1';
 import {TuiHintExample2} from './examples/2';
+import {TuiHintExample3} from './examples/3';
 import {ExampleTuiHintComponent} from './hint.component';
 
 @NgModule({
@@ -19,8 +21,14 @@ import {ExampleTuiHintComponent} from './hint.component';
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiHintComponent)),
         TuiNotificationModule,
+        TuiBadgeModule,
+    ],
+    declarations: [
+        ExampleTuiHintComponent,
+        TuiHintExample1,
+        TuiHintExample2,
+        TuiHintExample3,
     ],
-    declarations: [ExampleTuiHintComponent, TuiHintExample1, TuiHintExample2],
     exports: [ExampleTuiHintComponent],
 })
 export class ExampleTuiHintModule {}

projects/demo/src/modules/directives/hint/hint.template.html

@@ -28,6 +28,14 @@
             </tui-notification>
             <tui-hint-example-2></tui-hint-example-2>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="nested"
+            heading="Nested"
+            [content]="example3"
+        >
+            <tui-hint-example-3></tui-hint-example-3>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>