Primitives
Display additional information on hover.
/** This example uses ng-primitives styles, which are imported from ng-primitives/example-theme/index.css in the global styles file **/
import { Component } from "@angular/core";
import { NgpButton } from "ng-primitives/button";
import { NgpTooltip, NgpTooltipTrigger } from "ng-primitives/tooltip";
@Component({
selector: "app-root",
imports: [NgpTooltipTrigger, NgpTooltip, NgpButton],
template: `
<button [ngpTooltipTrigger]="tooltip" ngpButton type="button">
Tooltip
</button>
<ng-template #tooltip>
<div ngpTooltip>
Hover over items to reveal additional context or details. Tooltips
provide quick insights without cluttering your screen.
</div>
</ng-template>
`,
styles: `
button {
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.5rem;
color: var(--ngp-text-primary);
outline: none;
height: 2.5rem;
font-weight: 500;
background-color: var(--ngp-background);
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--ngp-button-shadow);
}
button[data-hover] {
background-color: var(--ngp-background-hover);
}
button[data-focus-visible] {
outline: 2px solid var(--ngp-focus-ring);
}
button[data-press] {
background-color: var(--ngp-background-active);
}
[ngpTooltip] {
position: absolute;
max-width: 16rem;
border-radius: 0.5rem;
background-color: var(--ngp-background-inverse);
padding: 0.5rem 0.75rem;
border: none;
font-size: 0.75rem;
font-weight: 500;
color: var(--ngp-text-inverse);
animation: tooltip-show 200ms ease-in-out;
transform-origin: var(--ngp-tooltip-transform-origin);
}
@keyframes tooltip-show {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
`,
})
export class AppComponent {}
Import the Tooltip primitives from ng-primitives/tooltip.
import { NgpTooltip } from 'ng-primitives/tooltip';Assemble the tooltip directives in your template.
<button [ngpTooltipTrigger]="tooltip" ngpButton>Hover me</button>
<ng-template #tooltip>
<div ngpTooltip>Tooltip content</div>
</ng-template>The following directives are available to import from the ng-primitives/tooltip package:
Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`.[ngpTooltip]ngpTooltip
Apply the `ngpTooltipTrigger` directive to an element that triggers the tooltip to show. Access the tooltip template ref.
The open state of the tooltip.
Define if the trigger should be disabled.
Define the placement of the tooltip relative to the trigger.
Define the offset of the tooltip relative to the trigger.
Define the delay before the tooltip is displayed.
Define the delay before the tooltip is hidden.
Define whether the tooltip should flip when there is not enough space for the tooltip.
Define the container in which the tooltip should be attached.
Emit an event when the tooltip is opened or closed.
[ngpTooltipTrigger]ngpTooltipTrigger
| Attribute | Description |
|---|---|
data-open |
Applied when the popover is open. |
data-disabled |
Applied when the tooltip is disabled. |
The ngpTooltip primitive adds a CSS custom property --ngp-tooltip-transform-origin to the element that can be used to animate the tooltip from the trigger element.
You can configure the default options for all tooltips in your application by using the provideTooltipConfig function in a providers array.
import { provideTooltipConfig } from 'ng-primitives/tooltip';
bootstrapApplication(AppComponent, {
providers: [
provideTooltipConfig({
offset: 4,
placement: 'top',
showDelay: 0,
hideDelay: 0,
flip: true,
container: document.body,
}),
],
});Define the offset from the trigger element.
Define the placement of the tooltip.
Define the delay before the tooltip shows.
Define the delay before the tooltip hides.
Define if the tooltip should flip when it reaches the edge of the viewport.
Define the container element for the tooltip. This is the document body by default.
Copyright © 2025 Angular Primitives