Taiga UI 5.0 is out!

Tooltip KIT

GitHub

On this page

See also

Hint, HintManual, HintPointer

Component to show icons with a hint by hover

Basic

Component with a static text...

...or any custom HTML or logic with PolymorpheusContent :

Example of wrapping tooltip 

    
      
    

      
      
    

  
    
      <p>Component with a static text...</p>
<tui-icon
    tuiHintDirection="end"
    tuiTooltip="Supports basic <strong>HTML</strong>"
/>
<p>
    ...or any custom HTML or logic with
    <code>PolymorpheusContent</code>
    :
</p>
<tui-icon
    tuiHintDirection="bottom-end"
    [tuiTooltip]="tooltip"
/>
<p class="wrapping-tooltip">
    Example of wrapping tooltip
    <tui-icon
        tuiHintDirection="bottom-end"
        [tuiTooltip]="tooltip"
    />
</p>

<ng-template #tooltip>
    @let isLoading = (isLoading$ | async)!;
    <tui-loader
        size="s"
        class="tooltip"
        [inheritColor]="true"
        [loading]="isLoading"
    >
        {{ isLoading ? '' : 'Error 502: Bad Gateway' }}
    </tui-loader>
</ng-template>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.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;
    }
}

Custom host

Custom host can be set with tuiHint directive

❤️ 
    
      
    

      
      
    

  
    
      <p>
    Custom host can be set with
    <a
        tuiLink
        [routerLink]="['/tui-hint']"
    >
        <code>tuiHint</code>
    </a>
    directive
</p>
<div
    size="l"
    tabindex="0"
    tuiAvatar
    tuiHintAppearance="floating"
    tuiHintDirection="end"
    [style.background]="'❤️' | tuiAutoColor"
    [tuiHint]="tooltip"
>
    ❤️
</div>
<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>

    

      
      
    

  
    
      :host {
    display: block;
    background: #3e4757;
    box-shadow: 0 0 0 100rem #3e4757;
    color: var(--tui-background-base);
}

Repeating template 

    
      
    

      
      
    

  
    
      <ng-template #tooltip>Allowed symbols: ♠ ♣ ♦ ♥</ng-template>

<tui-textfield
    tuiTextfieldSize="m"
    class="input"
>
    <input tuiInput />
</tui-textfield>

<tui-icon
    tuiHintDirection="bottom"
    [tuiTooltip]="tooltip"
/>

<tui-textfield
    tuiTextfieldSize="m"
    class="input"
>
    <input tuiInput />
</tui-textfield>

<tui-icon
    appearance=""
    tuiHintDirection="bottom"
    tuiTooltip="Set icon color with 'color' after resetting appearance"
    class="primary"
/>

<tui-textfield
    tuiTextfieldSize="m"
    class="input"
>
    <input tuiInput />
</tui-textfield>

<tui-icon
    tuiHintDirection="end"
    [tuiTooltip]="tooltip"
/>

    

      
      
    

  
    
      :host {
    display: block;
    inline-size: 25rem;
}

.primary {
    color: var(--tui-background-accent-1);
}

.input {
    display: inline-flex;
    inline-size: 18.75rem;
    margin: 0.75rem 0.75rem 0.75rem 0;
    vertical-align: middle;
}

Options

Modified icon

Modified appearance

    
      
    

      
      
    

  
    
      <p>Modified icon</p>
<tui-icon tuiTooltip="Oh, snap!" />

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