Free
Pro

Tooltip

A Base UI (Angular) tooltip is an attribute on any host: base-tooltip plus the hint text. It hides on leave, blur, Escape, or scroll. Use tooltipPlacement, not placement, so it does not collide with dropdown or popover on the same element. Copy-in source, no npm UI package.

When to use

  • Icon-only buttons and truncated labels that need a short hint.
  • When the extra text is not required to complete the task.

When not to use

  • Errors, help that must be visible — use helper text or an alert.
  • Rich interactive content — use popover or hover-card.

Install with npx base-ui-cli add tooltip.

free

Default Tooltip

Default Tooltip example below.


HTML

Tooltip position

Control tooltip position with tooltipPlacement="" (not bare placement — that collides with dropdown/popover). Supported positions: "left", "right", "top", and "bottom". Tooltips dismiss on scroll so they do not float away from the host.


HTML

Tooltip type

By default Base Tooltip is dark, but we support light version, as well. Use type="light" to switch to light version.


HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add tooltip

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add tooltip
// Paths are relative to aliases.components (default: src/app/components)
import { TooltipDirective } from './tooltip/tooltip.directive';

@Component({
  selector: 'app-your-component',
  imports: [
    TooltipDirective
  ],
  template: `...`
})
export class YourComponent {}

API for tooltip — generated from JSDoc in the library source.

API reference for tooltip
APIMemberTypeDefaultDescription
[base-tooltip]base-tooltipstring''The text content to display inside the tooltip.
[base-tooltip]tooltipPlacementTooltipPlacement | string'top'The positioning of the tooltip relative to the host element. Defaults to 'top'. Use the `tooltipPlacement` template attribute — not bare `placement`, which collides with dropdown, popover, and drawer placement on the same host.
[base-tooltip]tooltipClassstring''Additional custom CSS classes to apply to the tooltip element.
[base-tooltip]delayunknown'0'Milliseconds to delay before showing the tooltip. Defaults to '0'.
[base-tooltip]type'dark' | 'light' | string'dark'The visual theme variant. Defaults to 'dark'.
[base-tooltip]canShowbooleantrueWhether the tooltip is permitted to show at all. Defaults to true.