A Ply tooltip is an attribute on any host: ply-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.
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