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

Arrow Component

Refer to the core package.

Sources

Other npm packages from this library:

• core
• popover
• dialog