ngx-ellipsis-tool

Angular directive that automatically detects when text is truncated with ellipsis (...) and shows a tooltip with the full text — only when needed!

✨ Major Features

✅ Only shows tooltip if text is actually truncated. ✅ No dependencies (doesn’t use Angular CDK). ✅ Works on hover (desktop) or tap (mobile). ✅ Standalone and NgModule compatible. ✅ Easy styling via custom classes. ✅ Multi-line tooltips supported.

🚀 Installation

Install the package via npm:

npm install --save ngx-ellipsis-tool

or with yarn:

yarn add ngx-ellipsis-tool

⚙️ Basic Usage

Import the Component

If you’re using Angular standalone components:

import { Component } from '@angular/core';
import { NgxEllipsisTooltipDirective } from 'ngx-ellipsis-tool';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [NgxEllipsisTooltipDirective],
  template: `
    <div
      ngxEllipsisTooltip
      [tooltipText]="'This is the full text in the tooltip!'"
      placement="bottom"
      [tooltipClass]="'my-tooltip-class'"
      [delay]="500"
      style="
        display: inline-block;
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      "
    >
      This is the full text in the tooltip!
    </div>
  `
})
export class AppComponent {}

Or import the module in your NgModule:

import { NgModule } from '@angular/core';
import { NgxEllipsisTooltipDirective } from 'ngx-ellipsis-tool';

@NgModule({
  imports: [NgxEllipsisTooltipDirective],
  exports: [NgxEllipsisTooltipDirective],
})
export class NgxEllipsisTooltipModule {}

And use it as shown in the standalone example.

How to customize

Use the tooltipClass input to pass your custom CSS class:

<div
  ngxEllipsisTooltip
  [tooltipText]="'Custom tooltip!'"
  [tooltipClass]="'my-tooltip-class'"
>
  Custom tooltip!
</div>

Example custom CSS

.my-tooltip-class {
  background-color: #007bff;
  color: #fff;
  font-family: monospace;
  font-size: 14px;
  border-radius: 8px;
  padding: 8px 12px;
}

✅ Multi-line tooltips are also supported by inserting \n into your text:

<div
  ngxEllipsisTooltip
  [tooltipText]="'This is a long tooltip.\nWith multiple lines!'"
>
  This is a long tooltip. With multiple lines!
</div>

🔧 Configuration Options

Pass a single config object to customize behavior:

| Property | Type | Default | Description | | -------------- | ------------------- | ---------- | ------------------------------------------------ | | tooltipText | string | inner text | Text to show in the tooltip. | | placement | 'top' \| 'bottom' | 'top' | Position of the tooltip relative to the element. | | delay | number | 300 | Delay in ms before showing the tooltip. | | tooltipClass | string | '' | Custom CSS class for styling the tooltip. |

🎯 Compatibility

Angular 17+

Modern browsers

📦 License

MIT © 2025

☕ Buy Me a Coffee

If you find this library helpful, you can support my work:

👉 Buy Me a Coffee

🔎 Keywords

angular, otp, web-otp, otp-input, code-input, pin-input, one-time-password, ngx-otp-inputs, angular-library, two-factor-auth, authentication