Tooltip

Tooltip is a short helper message for one interface element. It appears on hover, focus, or touch and is best for icon buttons, abbreviations, disabled explanations, dense controls, and short labels that need a little context. Use Popover for interactive anchored content, Menu for command lists, Alert for visible page messages, and form field hints or errors for form guidance.

The NgStarter Angular Tooltip component lets you show a short helper message for one interface element on hover, focus, or touch. Use ngsTooltip as a directive on a trigger element when a short non-interactive helper message should explain an icon button, abbreviation, disabled state, dense control, compact label, or unclear affordance. It includes examples for Basic Tooltip, Tooltip With a Custom Position, Tooltip show and hide delay, and Tooltip manually showing and hiding.

Basic Tooltip

Use ngsTooltip on a trigger element when a short helper label should appear on hover, focus, or touch.

Tooltip With a Custom Position

Set the position when the default placement would cover nearby controls or make the tooltip harder to scan.

Tooltip position

Tooltip show and hide delay

Use show and hide delays for dense interfaces where tooltips should not flash during quick pointer movement.

Show delay

milliseconds

Hide delay

milliseconds

Tooltip manually showing and hiding

Export the directive when application logic needs to show, hide, or toggle the tooltip directly.

Click the following buttons to...

Tooltip disabled

Disable the tooltip when the helper text is not relevant for the current state.

Tooltip disabled

Tooltip position at origin

Position at origin places the tooltip near the pointer or touch point instead of the element box.

Position at origin enabled