@kit-ng-ui/tooltip

Hover / focus / click triggered text overlay for Kit UI. Mirrors ant-design's Tooltip.

Install

pnpm add @kit-ng-ui/tooltip @kit-ng-ui/core

Styles

// app styles.scss
@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/tooltip/styles' as tooltip;

Use

import { Component } from '@angular/core';
import { KitTooltipComponent } from '@kit-ng-ui/tooltip';

@Component({
  standalone: true,
  imports: [KitTooltipComponent],
  template: `
    <!-- Basic -->
    <kit-tooltip title="Hello">
      <button>Hover me</button>
    </kit-tooltip>

    <!-- Click trigger + placement -->
    <kit-tooltip title="Pinned" placement="bottomLeft" trigger="click">
      <button>Click me</button>
    </kit-tooltip>

    <!-- Rich content -->
    <kit-tooltip [titleTpl]="rich" placement="right">
      <kit-icon name="info" />
    </kit-tooltip>
    <ng-template #rich><b>Bold</b> hint with <i>style</i></ng-template>

    <!-- Custom color -->
    <kit-tooltip title="Brand" color="#5b21b6">
      <span>brand swatch</span>
    </kit-tooltip>
  `,
})
export class Demo {}

API

<kit-tooltip>

| Input | Type | Default | Description | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- | | arrow | boolean | true | Show the arrow pointing at the trigger. | | color | string \| null | null | Custom CSS color for the overlay background and arrow. | | disabled | boolean | false | Disable the tooltip without removing it from the DOM. | | mouseEnterDelay | number | 100 | Open delay (ms) for the hover trigger. | | mouseLeaveDelay | number | 100 | Close delay (ms) for the hover trigger. | | open | boolean (two-way [(open)]) | false | Controlled open state. | | placement | 'top' \| 'topLeft' \| 'topRight' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'left' \| 'leftTop' \| 'leftBottom' \| 'right' \| 'rightTop' \| 'rightBottom' | 'top' | Overlay position relative to the trigger. | | textColor | string \| null | null | Paired text color when [color] is set. Falls back to white. | | title | string \| null | null | Overlay text. Ignored when [titleTpl] is set. | | titleTpl | TemplateRef \| null | null | Rich-content alternative to [title]. | | trigger | 'hover' \| 'focus' \| 'click' | 'hover' | What gesture opens the overlay. |

| Output | Type | Description | | --------------- | --------------------- | ------------------------------------------------- | | visibleChange | EventEmitter<boolean> | Fires when the open state changes (either trigger or model). |

Behavior notes

• Inline positioning, not body-portalled. The overlay is rendered as a sibling of the trigger inside the wrapper. Ancestors with overflow: hidden clip the overlay. Body-portalled overlays are tracked as TODO(parity) and will arrive with @kit-ng-ui/util.
• aria-describedby is applied to the first focusable descendant of the projected trigger — not to the wrapper — so screen readers announce the tooltip when focus lands on the actual button or link. Make sure your trigger is a focusable element (<button>, <a href>, an input, or anything with tabindex). If no focusable descendant exists, the attribute is not applied.
• Escape closes the tooltip while open. The document keydown listener is attached only while open, and the outside-click listener is attached only when trigger='click' and open — so a page with many idle tooltips doesn't pile up global listeners.
• Disable while open? Setting [disabled]=true while the tooltip is open auto-closes it.
• Hover delay also gates closing: leaving the trigger does not immediately close — moving onto the overlay keeps it open, mirroring ant-design's pinning behavior.
• Custom color is propagated via the --kit-tooltip-bg and --kit-tooltip-text custom properties, so the arrow inherits the same color.