This library was generated with Nx using floating-ui for Angular apps.
The Tooltip component displays tooltips next to the trigger element.
Check out the Demo
To use this library, add ngxTooltip to the HTML element.
<button
ngxTooltip="Tooltip message"
placement="top-end"
>
Hover me!
</button>You can show the tooltip with an arrow:
<button
ngxTooltip="Tooltip message"
placement="top-end"
arrow
arrowPadding="8"
>
Hover me!
</button>Input Parameters
| Input | Description | Type | Default |
|---|---|---|---|
placement |
Position of the component according to the anchor | Placement |
'bottom' |
template |
Custom template for the tooltip | TemplateRef<any> |
undefined |
middleware |
List of floating-ui middlewares without arrow
|
MiddlewareList |
offset(4), flip() |
debounce |
Time delay before the component is displayed | number |
100 |
arrow |
Adds an arrow to the tooltip | boolean |
false |
arrowPadding |
Prevents overflow of the tooltip element corners if it has border-radius | number |
2 |
bindTo |
Render the component into an element | string | HTMLElement |
'.body' |
autoUpdate |
Automatically updates the position | boolean |
false |
ngxValue |
State of the tooltip (open/close) | boolean |
false |
Output Parameters
| Output | Description | Type |
|---|---|---|
ngxValueChange |
Emitter for changes in ngxValue
|
EventEmitter<boolean> |
showEnd |
Emitter for when the component is shown | EventEmitter |
hideEnd |
Emitter for when the component is hidden | EventEmitter |
computePosition |
Emitter for every call of computePosition
|
EventEmitter<ComputePosition> |
Use the NGX_TOOLTIP_CONFIG token to change default properties with the NgxTooltipConfig class.
import { Provider } from '@angular/core';
import { NGX_TOOLTIP_CONFIG, NgxTooltipConfig } from '@ngx-popovers/tooltip';
/**
* You have to install @ngx-popovers/core to import middleware.
* Version of @ngx-popovers/core is the same as @ngx-popovers/tooltip
*/
import { flip, offset, shift } from '@ngx-popovers/core';
export const TooltipConfigProvider: Provider = {
provide: NGX_TOOLTIP_CONFIG,
useValue: new NgxTooltipConfig({
debounce: 50,
placement: 'top-end',
/* Middleware list from floating-ui */
middleware: [
flip(),
shift(),
offset(8)
]
})
};You can use your own component to visualize tooltips.
There is an injection token NGX_TOOLTIP_COMPONENT that replaces the default component.
Example:
@Component({
standalone: true,
styles: `
.my-tooltip {
padding: 5px;
display: flex;
flex-direction: column;
gap: 4px;
background: #fff;
border: 1px solid #dedede;
}
`,
template: `
<div class="my-tooltip">
<span>I Custom Tooltip!</span>
<span>text: {{ text }}</span>
</div>
`
})
export class CustomTooltip extends TooltipBase {
}
export const TooltipProvider: Provider = {
provide: NGX_TOOLTIP_COMPONENT,
useValue: CustomTooltip
};Refer to the core package.
Other npm packages from this library: