GET STARTED

Import

Import the standalone directive from the granular Tooltip entry point.

import { NeuralTooltip } from '@neural-ng/core/tooltip';

@Component({
  imports: [NeuralTooltip],
})
export class AccountActions {}

Descriptive action

Hover or focus the action. Tooltip augments the visible label; it never replaces the control's accessible name.

Logical positions

Eight placements share the global overlay positioner. Start and end mirror under RTL; collisions flip or clamp inside the viewport.

Intent delays and disabled state

Opening and closing delays are independent. Disabled state prevents activation and immediately removes an open tooltip.

Reactive content

Signal input changes update both visible content and the active accessible description without recreating consumer state.

Imperative visibility

Template export exposes show, hide and readonly visible state for guided experiences while hover and focus remain available.

Disabled native controls

Disabled controls cannot receive focus. Put the explanation on a focusable wrapper and include the reason in its accessible name.

Unstyled and typed slots

Positioning, top-layer behavior and ARIA stay active while Tailwind owns the root, content and arrow surfaces.

Directive

Inputs

State and methods

Typed class slots

Public types

Compatibility alias

TooltipDirective remains a deprecated alias. New code and generated AI output should import NeuralTooltip.

Surface

Typography

Arrow and sizing

Motion