Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Default
The standard tooltip component.
Installation & Usage
Installation
Imports
Basic Usage
Examples
Positioning
Available positions are top, bottom, left, and right.
Colors
Styling tooltips with status colors for semantic meaning.
Custom Templates
Use ng-template to display rich content within tooltips.
Disabled State
How to handle tooltips on disabled elements or disabling the tooltip itself.
Usage Guidance
User Experience (UX) Tip
Tooltips are great for explaining Icon-only Buttons or clarifying complex terminology.
Accessibility Tip
Spartan Tooltips are ARIA-compliant. They ensure that screen readers can access the descriptive text linked to the host element.
Performance Optimization
Tooltips in this project use lazy rendering. The tooltip content is only added to the DOM when needed, keeping your initial page load light.
API Reference
Helm API
| Directive | Selector | Description |
|---|---|---|
| HlmTooltip | [hlmTooltip] | Main directive that provides spartan/ui styling. Inherits Brain API. |
Brain API
| Property | Type | Default | Description |
|---|---|---|---|
| position | 'top' | 'bottom' | 'left' | 'right' | 'top' | The side of the host element where the tooltip should appear. |
| showDelay | number | 0 | Delay (ms) before showing the tooltip. |
| hideDelay | number | 0 | Delay (ms) before hiding the tooltip. |
| tooltipDisabled | boolean | false | Whether the tooltip should be disabled. |