Tooltip

New

A little context, right when it helps. Add short hints to buttons, fields and everyday actions.

Four positionsKeyboard supportCustom templates

Position

Hover over a button or focus it with Tab. Tooltips flip when needed and stay inside the viewport.

A HELPFUL LITTLE DETAIL

Make every action clearer.

Focus

Use tooltipEvent="focus" for a hint that appears only while the field has keyboard focus.

Work email

Delay

Give the hint a moment to appear. This example waits 700 ms to show and 300 ms to hide.

Custom content

Use a template for richer advisory content. With autoHide disabled, the pointer can move onto the tooltip to read it.

Options and disabled state

Share configuration through tooltipOptions, or disable a hint without disabling its trigger.

Usage and API

TypeScript

import { AvTooltip } from 'avero-ui';

// Add AvTooltip to your standalone component imports.

HTML

<button avButton avTooltip="Save your changes" tooltipPosition="top">
  Save
</button>
<input avInput avTooltip="Use your work email" tooltipEvent="focus"
  aria-label="Email" />

Template

<button avButton [avTooltip]="tip" [autoHide]="false">Project status</button>
<ng-template #tip>
  <strong>All changes saved</strong>
  <span>Your workspace is up to date.</span>
</ng-template>

Inputs. avTooltip accepts text or a TemplateRef. tooltipPosition defaults to right; tooltipEvent to hover; showDelay and hideDelay to 0 ms; autoHide to true; tooltipDisabled to false. tooltipOptions overrides individual inputs for the keys supplied. Empty content hides the tooltip.

Keyboard and accessibility. Hover mode also responds to focus. Escape dismisses the hint without moving focus. Existing aria-describedby IDs are preserved. Templates should contain descriptive content only; use Popover for buttons, links and forms. Tooltips supplement visible labels and should not contain essential instructions.

Lifecycle and styling. Export as avTooltip for show() and hide(). Tooltips follow scrolling and resizing and are removed with their trigger. The native Popover top layer avoids clipping where supported. Set --av-tooltip-background, --av-tooltip-color, --av-tooltip-padding and --av-tooltip-radius globally, as the overlay is appended to the document body.