Overlay

Tooltip

A short hint next to an element: on hover, on keyboard focus, or opened from code. Screen readers get the text too, so an icon-only button with a tooltip needs no aria-label.

Features12

API

Theming

Basic

Add txTooltip to any element. It shows on hover and on keyboard focus and describes the element for screen readers.

11 lines

<div class="row">  <button    txButton    severity="secondary"    [outlined]="true"    txTooltip="Saves a draft you can finish later"  >    Save draft  </button>  <button txButton txTooltip="Sends the invoice to the customer">Send invoice</button></div>

An element without a name of its own is named by its tooltip: these buttons are announced as "Edit", "Duplicate", "Download as PDF" and "Delete" without an aria-label. Move through them with Tab — the tooltips follow without a delay.

18 lines

<div class="toolbar">  <button txButton icon="pencil" severity="secondary" [text]="true" txTooltip="Edit"></button>  <button    txButton    icon="copy"    severity="secondary"    [text]="true"    txTooltip="Duplicate"  ></button>  <button    txButton    icon="download"    severity="secondary"    [text]="true"    txTooltip="Download as PDF"  ></button>  <button txButton icon="trash" severity="danger" [text]="true" txTooltip="Delete"></button></div>

Placements

tooltipPlacement takes a side and an optional -start / -end alignment. The arrow keeps pointing at the middle of the element, and the tooltip flips to the other side when there is no room.

14 lines

<div class="grid">  @for (placement of placements; track placement) {    <button      txButton      size="small"      severity="secondary"      [outlined]="true"      [txTooltip]="placement"      [tooltipPlacement]="placement"    >      {{ placement }}    </button>  }</div>

Triggers

tooltipEvent: both (default) opens on hover and on keyboard focus, hover on the pointer only, focus on any focus — a good fit for hints on fields. A click hides a hover tooltip until the pointer leaves; Escape hides any tooltip.

22 lines

<div class="row">  <button txButton severity="secondary" [outlined]="true" txTooltip="Hover or Tab here">    Hover and focus  </button>  <button    txButton    severity="secondary"    [outlined]="true"    txTooltip="Only the pointer opens this one"    tooltipEvent="hover"  >    Hover only  </button>  <input    txInput    aria-label="Username"    placeholder="Username"    txTooltip="3–20 letters, digits or dashes"    tooltipEvent="focus"    tooltipPlacement="right"  /></div>

Delays

tooltipShowDelay and tooltipHideDelay (both 0 by default) set the timing; tooltipLife closes the tooltip on its own. While one tooltip was just open, the next one shows without a delay. Change the defaults for the whole app with provideTxTooltip({ showDelay: 400 }).

38 lines

<div class="row">  <button    txButton    severity="secondary"    [outlined]="true"    txTooltip="Right away"    [tooltipShowDelay]="0"  >    No delay  </button>  <button    txButton    severity="secondary"    [outlined]="true"    txTooltip="After a second"    [tooltipShowDelay]="1000"  >    1 s to show  </button>  <button    txButton    severity="secondary"    [outlined]="true"    txTooltip="Stays for a second after you leave"    [tooltipHideDelay]="1000"  >    1 s to hide  </button>  <button    txButton    severity="secondary"    [outlined]="true"    txTooltip="Gone in two seconds"    [tooltipLife]="2000"  >    2 s life  </button></div>

Multiline

tooltipMultiline makes the tooltip wider with taller lines for a few lines of text; new lines come from \n in the text.

8 lines

<button  txButton  variant="link"  txTooltip="example-store.com&#10;Registered until 14 March 2027&#10;Auto-renew on, DNS managed here"  tooltipMultiline>  example-store.com</button>

Template

Pass an <ng-template> for rich content. tooltipContext arrives as let-data; let-close="close" gives a function that hides the tooltip. Text is always shown as text, so a template is the way to add markup.

Olena Koval
Marek Nowak
Sara Lind

30 lines

<ul class="members">  @for (member of members; track member.name) {    <li>      <span>{{ member.name }}</span>      <button        txButton        variant="text"        severity="secondary"        size="small"        icon="users"        [txTooltip]="roles"        [tooltipContext]="member.roles"        tooltipPlacement="right"      >        {{ member.roles[0] }}        @if (member.roles.length > 1) {          +{{ member.roles.length - 1 }}        }      </button>    </li>  }</ul><ng-template #roles let-roles>  <strong>All roles</strong>  <ul class="role-list">    @for (role of roles; track role) {      <li>{{ role }}</li>    }  </ul></ng-template>

Interactive

tooltipInteractive lets the pointer move onto the tooltip without closing it, so its text can be selected and copied — try the full order id. By default the tooltip closes as soon as the pointer leaves the element.

Order
Status

20 lines

<dl class="details">  <dt>Order</dt>  <dd>    <button      txButton      variant="link"      size="small"      txTooltip="ord_8F2KQ1-7731-4c0e-9d1a-58b2a4c0f6e3"      [tooltipInteractive]="true"    >      ord_8F2KQ1…    </button>  </dd>  <dt>Status</dt>  <dd>    <button txButton variant="link" size="small" txTooltip="Paid on 4 November, 14:32">      Paid    </button>  </dd></dl>

Overflow

tooltipOverflowOnly shows the tooltip only when the text is cut off with an ellipsis — the short titles have none.

15 lines

<ul class="pages">  @for (page of pages; track page) {    <li>      <a        href="#"        class="title"        [txTooltip]="page"        tooltipOverflowOnly        (click)="$event.preventDefault()"      >        {{ page }}      </a>    </li>  }</ul>

Disabled

tooltipDisabled turns a tooltip off. A disabled button cannot take focus, so to explain why it is disabled put the tooltip on a focusable wrapper.

Show hints

17 lines

<div class="column">  <tx-toggle-switch label="Show hints" [(ngModel)]="hints" />  <div class="row">    <button      txButton      icon="refresh"      severity="secondary"      [text]="true"      aria-label="Refresh"      txTooltip="Reload the list"      [tooltipDisabled]="!hints()"    ></button>    <span tabindex="0" class="reason" txTooltip="Fill in the required fields first">      <button txButton [disabled]="true">Publish</button>    </span>  </div></div>

Manual

tooltipEvent="manual" leaves opening to your code: #tip="txTooltip" gives show(), hide(), toggle() and isOpen(). Here the tooltip confirms a copy and closes after tooltipLife.

https://example.com/invite/7Q2M

15 lines

<div class="row">  <code>https://example.com/invite/7Q2M</code>  <button    txButton    icon="copy"    severity="secondary"    [outlined]="true"    aria-label="Copy link"    txTooltip="Copied"    tooltipEvent="manual"    [tooltipLife]="1500"    #copied="txTooltip"    (click)="copy(); copied.show()"  ></button></div>

Design tokens

tooltipDt changes the tokens of one tooltip (the element itself may have its own dt). For every tooltip, override tooltip in the preset.

18 lines

<button  txButton  severity="secondary"  [outlined]="true"  txTooltip="A wider, roomier tooltip in the accent colour with a bigger arrow"  [tooltipDt]="{    root: {      background: 'var(--tx-primary-base)',      color: 'var(--tx-primary-contrast)',      maxWidth: '200px',      padding: '10px 14px',      borderRadius: 'var(--tx-radius-lg)',    },    arrow: { size: '12px' },  }">  Custom tooltip</button>