Tooltip KIT

    
    

        
            Copy
        
        
    

    
<p>Component with a static text...</p>
<tui-icon
    tuiHintDirection="right"
    tuiTooltip="Supports basic <strong>HTML</strong>"
/>
<p>
    ...or any custom HTML or logic with
    <code>PolymorpheusContent</code>
    :
</p>
<tui-icon
    tuiHintDirection="bottom-right"
    [tuiTooltip]="tooltip"
/>
<p class="wrapping-tooltip">
    Example of wrapping tooltip
    <tui-icon
        tuiHintDirection="bottom-right"
        [tuiTooltip]="tooltip"
    />
</p>
 
<ng-template #tooltip>
    <tui-loader
        *tuiLet="(isLoading$ | async)! as isLoading"
        size="s"
        class="tooltip"
        [inheritColor]="true"
        [showLoader]="isLoading"
    >
        {{ isLoading ? '' : 'Error 502: Bad Gateway' }}
    </tui-loader>
</ng-template>
    

        
            Copy
        
        
    

    
import {AsyncPipe} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiLet} from '@taiga-ui/cdk';
import {TuiIcon, TuiLoader} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';
import {interval, map, startWith} from 'rxjs';
 
@Component({
    standalone: true,
    exportAs: "Example1",
    imports: [AsyncPipe, TuiIcon, TuiLet, TuiLoader, TuiTooltip],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {
    protected isLoading$ = interval(2000).pipe(
        map((i) => Boolean(i % 2)),
        startWith(true),
    );
}
    

        
            Copy
        
        
    

    
@import '@taiga-ui/core/styles/taiga-ui-local.less';
 
.tooltip {
    block-size: 1.25rem;
    min-inline-size: 6.25rem;
}
 
.wrapping-tooltip {
    inline-size: fit-content;
    max-inline-size: 11rem;
    background: var(--tui-background-base-alt);
    border-radius: 0.5rem;
    line-height: 1.5rem;
    padding: 0.375rem 1.875rem 0.375rem 0.5rem;
    resize: horizontal;
    overflow: auto;
 
    & [tuiTooltip] {
        position: absolute;
    }
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<p>
    Custom host can be set with
    <a
        tuiLink
        [routerLink]="['/tui-hint']"
    >
        <code>tuiHint</code>
    </a>
    directive
</p>
<tui-avatar
    size="l"
    tabindex="0"
    tuiHintAppearance="dark"
    tuiHintDirection="right"
    [style.background]="'❤' | tuiAutoColor"
    [tuiHint]="tooltip"
>
    ❤
</tui-avatar>
<ng-template #tooltip>
    <div>
        What is
        <strong>love</strong>
        ?
    </div>
    <div>Baby don't hurt me</div>
    <div>Don't hurt me</div>
    <div>No more...</div>
</ng-template>
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {TuiAutoColorPipe, TuiHintDirective, TuiLink} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example2",
    imports: [RouterLink, TuiAutoColorPipe, TuiAvatar, TuiHintDirective, TuiLink],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {}
    

        
            Copy
        
        
    

    
:host {
    display: block;
    margin: -1.25rem;
    padding: 1.875rem;
    background: #3e4757;
    color: var(--tui-background-base);
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<ng-template #tooltip>Allowed symbols: ♠ ♣ ♦ ♥</ng-template>
 
<tui-input
    tuiTextfieldSize="m"
    class="input"
    [tuiTextfieldLabelOutside]="true"
/>
<tui-icon
    tuiHintDirection="bottom"
    [tuiTooltip]="tooltip"
/>
 
<tui-input
    tuiTextfieldSize="m"
    class="input"
    [tuiTextfieldLabelOutside]="true"
/>
<tui-icon
    appearance=""
    tuiHintDirection="bottom"
    tuiTooltip="Set icon color with 'color' after resetting appearance"
    class="primary"
/>
 
<tui-input
    tuiTextfieldSize="m"
    class="input"
/>
<tui-icon
    tuiHintDirection="right"
    [tuiTooltip]="tooltip"
/>
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';
import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
@Component({
    standalone: true,
    exportAs: "Example3",
    imports: [
        TuiIcon,
        TuiInputModule,
        TuiTextfield,
        TuiTextfieldControllerModule,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {}
    

        
            Copy
        
        
    

    
:host {
    display: block;
    inline-size: 25rem;
}
 
.primary {
    color: var(--tui-background-accent-1);
}
 
.input {
    display: inline-block;
    inline-size: 18.75rem;
    margin: 0.75rem 0.75rem 0.75rem 0;
    vertical-align: middle;
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<p>Modified icon</p>
<tui-icon tuiTooltip="Oh, snap!" />
 
<p>Modified appearance</p>
<tui-icon
    appearance="negative"
    icon="@tui.info"
    tuiTooltip="Oh, snap!"
/>
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {tuiHintOptionsProvider, TuiIcon} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example4",
    imports: [TuiIcon, TuiTooltip],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        tuiHintOptionsProvider({
            icon: '@tui.camera',
        }),
    ],
})
export default class Example {}
    

        
            Copy