@ngx-popovers/tooltip NPM

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>`
`strategy`	This is the type of CSS position property to use	`absolute` \| `fixed` \| `undefined`	`undefined`

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
};