Components / Tooltip

Tooltip

Supplementary text shown for an element on hover and keyboard focus.

example.component.html

html

<aevko-tooltip>
  <button aevkoTooltipTrigger aria-label="Save workspace">
    Save
  </button>
  <span>
    Save workspace
  </span>
</aevko-tooltip>

Installation

npx aevko-ui@latest add tooltip --yes

Source ownership

Customization

Keep content concise, project any focusable trigger and adjust delay or placement without replacing its accessible description relationship.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`open`	`model<boolean>`	`false`	Observable tooltip visibility.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	Tooltip placement.
`delay`	`number`	`300`	Open delay in milliseconds.
`aevkoTooltipTrigger`	`projected slot`	`required`	Focus and hover target described by the tooltip.

Accessibility contract

Accessibility

Included behavior

The projected trigger references a role tooltip description that appears for both focus and pointer hover.

Your responsibility

Give icon-only triggers their own accessible name; use the tooltip for supporting explanation rather than the only label.

Back to all components