Taiga UI 5.0 is out!

Hint CORE

Examples API GitHub

On this page

See also

Tooltip, HintManual, HintPointer

Directive to show a hint by hover of an element

Basic

❤️ 
    
      
    

      
      
    

  
    
      <div
    size="l"
    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>Counter: {{ counter() }}</div>
    <div>No more...</div>
    <button
        size="xs"
        tuiButton
        type="button"
        (click)="onClick()"
    >
        Counter + 1
    </button>
</ng-template>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: block;
    background: #3e4757;
    box-shadow: 0 0 0 100rem #3e4757;
}

Customizing

Make sure *tuiHint directive is nested inside tuiHint directive so that dependency injection works properly
❤️ 
    
      
    

      
      
    

  
    
      <div
    size="l"
    tuiAvatar
    tuiHint
    tuiHintDirection="end"
    [style.background]="'❤️' | tuiAutoColor"
>
    ❤️

    <tui-hint
        *tuiHint
        class="hint"
        [@.disabled]="true"
    >
        You can expose the bubble component with
        <code>*tuiHint</code>
        directive to customize it
    </tui-hint>
</div>

    

      
      
    

  
    
      .hint {
    color: #fff;
    background: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
    font-weight: bold;

    &::before {
        display: none;
    }
}

Nested

Hover me 
    
      
    

      
      
    

  
    
      <span
    appearance="accent"
    size="l"
    tuiBadge
    class="badge tui-space_left-2"
    [tuiHint]="badgeHint"
>
    Hover me

    <ng-template #badgeHint>
        <a
            tuiHintAppearance="dark"
            [tuiHint]="linkHint"
        >
            Hover me again

            <ng-template #linkHint>Nested hint</ng-template>
        </a>
    </ng-template>
</span>

Auto

Resize so text overflows
    
      
    

      
      
    

  
    
      <div tuiHintOverflow>Resize so text overflows</div>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

div {
    .text-overflow();

    resize: horizontal;
}

Form 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <tui-textfield
        tuiChevron
        tuiTextfieldSize="m"
        [content]="stringify | tuiStringifyContent"
    >
        <label tuiLabel>Term</label>

        <input
            formControlName="period"
            tuiSelect
        />
        <tui-data-list-wrapper
            *tuiDropdown
            [itemContent]="stringify | tuiStringifyContent"
            [items]="items | tuiFilterByInput"
        />

        <tui-icon
            tuiHintDirection="top-start"
            [tuiTooltip]="periodHint"
        />
    </tui-textfield>
    <ng-template #periodHint>
        You will pay in equal installments on a monthly basis You will pay in equal installments on a monthly basis
    </ng-template>
</form>

<button
    tuiHintAppearance="floating"
    tuiHintDirection="top-start"
    tuiLink
    type="button"
    class="tui-space_top-4"
    [tuiHint]="howToBuyTooltip"
>
    How to buy

    <ng-template #howToBuyTooltip>
        <ol class="tui-list tui-list_ordered tui-list_small">
            <li class="tui-list__item">Choose an installment plan</li>
            <li class="tui-list__item">Fill in the application</li>
            <li class="tui-list__item">
                When the bank approves, sign the contract via SMS or get it delivered to sign
            </li>
        </ol>
    </ng-template>
</button>
GitHub StackBlitz