Easily show tooltips programmatically and/or declaratively in Angular.
- Angular compatibility
- Installation
- Accessibility
- Tooltip placement
- Using
TooltipDirective - Using
TooltipService - Example Usage
| This library | Angular |
|---|---|
| 1.x.x | 16 - 18 |
-
npmnpm i -S @lazycuh/angular-tooltip -
pnpmpnpm i -S @lazycuh/angular-tooltip -
yarnyarn add @lazycuh/angular-tooltip
The tooltip component that gets created handles wiring up aria-describedby attribute for accessability between the tooltip trigger and the tooltip content, so it's completely transparent to you as the API user.
There are 2 supported placement values: vertical and horizontal. vertical will either place the tooltip at the bottom or top of the anchor element depending on which side has enough space for the tooltip to not be cut off. Similarly, horizontal will either place the tooltip at the right or left of the anchor element depending on which side has enough space for the tooltip to not be cut off. By default, vertical is used and the tooltip is placed at the bottom of the anchor.
Because TooltipDirective is a standalone directive, you must import it into your @NgModule or your standalone component before using it.
TooltipDirective can be applied to any elements in your templates to trigger a tooltip on hover/keyboard navigation (when users focus on the tooltip trigger by pressing the tab key)/long presses on mobile devices.
Sets the tooltip message to show.
Sets the position where the tooltip is placed. Valid values are vertical and horizontal. vertical is the default if not specified.
Sets the theme. Must be either dark or light. dark is the default if not provided.
@Component({
imports: [TooltipDirective],
selector: 'your-component',
standalone: true,
template: `
<button
lcTooltip='Hello World'
<!-- if "lcTooltipPlacement" is not specified, "vertical" is assumed -->
lcTooltipPlacement='vertical'
<!-- if "lcTooltipTheme" is not specified, "dark" is assumed -->
lcTooltipTheme='dark'>
Hover me
</button>
`
})
export class YourComponent {}| Theme | |
|---|---|
| Dark |  |
| Light |  |
The tooltip also repositions itself to the top if it overflows the bottom edge of the viewport for vertical placement, similar behavior also applies for the other horizontal placement.
 |
The tooltip is also displayed when the trigger element receives keyboard focus when the you press the tab key.
 |
On mobile devices, you can activate the tooltip by long-pressing the trigger element.
 |
This class allows to programmatically show a tooltip anchored at an element. See TooltipConfiguration for the different options to configure the tooltip. Please note that even though this class can create as many tooltips as desired, it cannot selectively close a tooltip, it can only close all currently opened tooltips.
export declare class TooltipService {
/**
* Set the default theme that will be used for all tooltips created in the future.
*
* @param theme The new theme to be used as the default.
*/
static setDefaultTheme(theme: Theme): void;
/**
* Show a tooltip anchored at `anchor` with a configuration object specified by `configuration`.
* Ensure that the last opened tooltip has been closed before calling this method.
*
* @param anchor The target at which to place the tooltip.
* @param configuration The configuration object for this tooltip instance.
*/
show(anchor: Element, configuration: TooltipConfiguration): void;
/**
* Show a tooltip anchored at the provided x/y coordinates with a configuration object specified by `configuration`.
* Ensure that the last opened tooltip has been closed before calling this method.
*
* @param x The x coordinate to place the tooltip.
* @param y The y coordinate to place the tooltip.
* @param configuration The configuration object for this tooltip instance.
*/
showAt(x: number, y: number, configuration: TooltipConfiguration): void;
/**
* Hide all opened tooltips.
*/
hide(): void;
}The configuration object for the current tooltip.
/**
* The configuration object for the current tooltip..
*/
export interface TooltipConfiguration {
/**
* The optional class name to add to this tooltip.
*/
className?: string;
/**
* The required content to show, it accepts a `TemplateRef`, a `@Component()` class, or a string.
*/
content: TemplateRef<unknown> | Type<unknown> | string;
/**
* The optional context object that is referenced by the template ref.
*/
context?: unknown;
/**
* Where to position the tooltip. Default is `vertical`.
*/
placement?: Placement;
/**
* The optional theme for this tooltip. Default is `light`.
*/
theme?: Theme;
}Describes the direction in which the tooltip is placed with respect to its anchor.
type Placement =
/**
* The tooltip will be placed either at the left or at the right with respect to its anchor
* depending on how much available space there is in that direction. By default,
* the tooltip will be placed at the right of its anchor for this placement.
*/
| 'horizontal'
/**
* The tooltip will be placed either at the bottom or at the top with respect to its anchor
* depending on how much available space there is in that direction. By default,
* the tooltip will be placed at the bottom of its anchor for this placement.
* This is the default placement if not specified
*/
| 'vertical';type Theme = 'light' | 'dark';// Import the service into your class to start using it
import { TooltipService, Placement, Theme } from '@lazycuh/angular-tooltip';
@Component({
selector: 'test-component',
template: `
<button
#button
type="button"
(pointerover)="onShowTooltip(#button)"
(pointerout)="onHideTooltip()">
Hover me!!!
</button>
`
})
export class TestComponent {
constructor(private readonly tooltipService: TooltipService) {}
onShowTooltip(trigger: HTMLButtonElement) {
this.tooltipService.show(trigger, {
content: 'This is a tooltip',
className: 'optional-class-name',
placement: 'horizontal',
theme: 'light'
});
}
onHideTooltip() {
this._tooltipService.hide();
}
} |
// Import the service into your class to start using it
import { TooltipService, Placement, Theme } from '@lazycuh/angular-tooltip';
@Component({
selector: 'test-component',
template: `
<button
#button
type="button"
(pointerover)="onShowTooltip(button, templateRefContent)"
(pointerout)="onHideTooltip()">
Hover me
</button>
<ng-template
#templateRefContent
let-name>
<span>
Hello <strong>{{ name }}</strong>
</span>
</ng-template>
`
})
export class TestComponent {
constructor(private readonly tooltipService: TooltipService) {}
onShowTooltip(button: HTMLButtonElement, templateRefContent: TemplateRef<unknown>) {
this.tooltipService.show(button, {
content: templateRefContent,
/*
* Passing the context object value to the template
*/
context: {
$implicit: 'TemplateRef'
},
placement: 'vertical',
theme: 'dark'
});
}
onHideTooltip() {
this._tooltipService.hide();
}
} |
The above examples are contrived at best, a better use case would be for when you need to manually create many <circle> and <path> SVG elements to render a network of some sort, and you need to display details about each node or edge when you hover over them, in this case, you can use TooltipService APIs to programmatically show/hide tooltips on mouseover (pointerover)/mouseout(pointeout).