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.
| Prop | Type | Default |
|---|---|---|
ngsTooltip The message to be displayed in the tooltip | string | – |
ngsTooltipPosition The position of the tooltip | 'above' | 'below' | 'left' | 'right' | 'before' | 'after' | below |
ngsTooltipClass Custom CSS classes to be applied to the tooltip | any | – |
ngsTooltipShowDelay The delay before the tooltip is shown (in ms) | number | 0 |
ngsTooltipHideDelay The delay before the tooltip is hidden (in ms) | number | 0 |
ngsTooltipOffset The offset of the tooltip from the element (in px) | number | 6 |
ngsTooltipPositionAtOrigin Whether the tooltip should be positioned at the mouse/touch origin | boolean | false |
ngsTooltipDisabled Whether the tooltip is disabled | boolean | false |
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.