@ngx-popovers/tooltip v1.0.1
Tooltip
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
Usage
To use this library, add ngxTooltip
to the HTML element.
<button
ngxTooltip="Tooltip message"
placement="top-end"
>
Hover me!
</button>
Arrow
You can show the tooltip with an arrow:
<button
ngxTooltip="Tooltip message"
placement="top-end"
arrow
arrowPadding="8"
>
Hover me!
</button>
API
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> |
Configuration
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)
]
})
};
Custom View
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
};
Arrow Component
Refer to the core package.
Sources
Other npm packages from this library:
24 days ago
1 month ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago