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.
Getting Started
Forms
Components
78
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Calendar
Card
Card Overlay
Carousel
Chips
Code Highlighter
Color Picker
Color Switcher
Command Bar
Comment Editor
Comparison Slider
Confirm
Cookie Popup
Crop
Datepicker
Dialog
Digit Roller
Divider
Drawer
Emoji Picker
Empty State
Events
Expand
Expansion Panel
File Type
Filter Builder
Gauge
Grid
Guided Tour
Headless Stepper
Icon
Image Placeholder
Image Resizer
Image Viewer
Image Zoom Viewer
Incidents
Keyboard
Layout
List
Marquee
Menu
Notifications
Paginator
Popover
Progress Bar
Progress Spinner
Resizable Container
Screen Loader
Sidenav
Signature Pad
Skeleton
Slider
Snackbar
Sort
Split Pane
Step Tracker
Stepper
Suggestions
Table
Tabs
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Typed Signature Pad
Upload
Video Viewer
Libraries
Tooltip
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.
after
Tooltip show and hide delay
Use show and hide delays for dense interfaces where tooltips should not flash during quick pointer movement.
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 position at origin
Position at origin places the tooltip near the pointer or touch point instead of the element box.