A Ply tooltip is an attribute on any host: ply-tooltip plus the hint text. The panel is a CDK Overlay (not a body portal). 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.
Install with npx ply-ui-cli add tooltip.
Default Tooltip example below.
<button ply-button color="primary" ply-tooltip="Default tooltip" tooltipPlacement="top" > Tooltip </button>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add tooltip
// Paths are relative to aliases.components (default: src/app/components)
import { TooltipDirective } from './tooltip/tooltip.directive';
@Component({
selector: 'app-tooltip-example',
imports: [
TooltipDirective
],
template: `...`
})
export class TooltipExampleComponent {}Install
npx ply-ui-cli add tooltip
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.
<button ply-button color="primary" ply-tooltip="Tooltip right" tooltipPlacement="right" > Tooltip right </button> <button ply-button color="primary" ply-tooltip="Tooltip top" tooltipPlacement="top" > Tooltip top </button> <button ply-button color="primary" ply-tooltip="Tooltip bottom" tooltipPlacement="bottom" > Tooltip bottom </button> <button ply-button color="primary" ply-tooltip="Tooltip left" tooltipPlacement="left" > Tooltip left </button>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add tooltip
// Paths are relative to aliases.components (default: src/app/components)
import { TooltipDirective } from './tooltip/tooltip.directive';
@Component({
selector: 'app-tooltip-example',
imports: [
TooltipDirective
],
template: `...`
})
export class TooltipExampleComponent {}Install
npx ply-ui-cli add tooltip
By default Base Tooltip is dark, but we support light version, as well. Use type="light" to switch to light version.
<button ply-button color="primary" ply-tooltip="Default tooltip dark" tooltipPlacement="top" > Default tooltip </button> <button ply-button color="primary" ply-tooltip="Tooltip light" tooltipPlacement="top" type="light" > Tooltip light </button>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add tooltip
// Paths are relative to aliases.components (default: src/app/components)
import { TooltipDirective } from './tooltip/tooltip.directive';
@Component({
selector: 'app-tooltip-example',
imports: [
TooltipDirective
],
template: `...`
})
export class TooltipExampleComponent {}Install
npx ply-ui-cli add tooltip
Run the following command to add this component to your project:
npx ply-ui-cli add tooltip
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-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 | Member | Type | Default | Description |
|---|---|---|---|---|
[ply-tooltip] | ply-tooltip | string | '' | The text content to display inside the tooltip. |
[ply-tooltip] | tooltipPlacement | TooltipPlacement | 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. |
[ply-tooltip] | tooltipClass | string | '' | Additional custom CSS classes to apply to the tooltip element. |
[ply-tooltip] | delay | unknown | '0' | Milliseconds to delay before showing the tooltip. Defaults to '0'. |
[ply-tooltip] | type | 'dark' | 'light' | string | 'dark' | The visual theme variant. Defaults to 'dark'. |
[ply-tooltip] | canShow | boolean | true | Whether the tooltip is permitted to show at all. Defaults to true. |
Content