ngx-ellipsis-tool/README.md

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

# 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!

[![npm version](https://img.shields.io/npm/v/ngx-ellipsis-tool.svg)](https://www.npmjs.com/package/ngx-ellipsis-tool)
[![Downloads](https://img.shields.io/npm/dw/ngx-ellipsis-tool.svg)](https://www.npmjs.com/package/ngx-ellipsis-tool)
 
---

## ✨ 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:

```bash
npm install --save ngx-ellipsis-tool
```

or with yarn:

```bash
yarn add ngx-ellipsis-tool
```

##  ⚙️ Basic Usage
### Import the Component

If you’re using Angular standalone components:

```typescript
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:

```typescript
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:

```html
<div
  ngxEllipsisTooltip
  [tooltipText]="'Custom tooltip!'"
  [tooltipClass]="'my-tooltip-class'"
>
  Custom tooltip!
</div>
```
### Example custom CSS
```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:

```html
<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](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)](https://buymeacoffee.com/leonardomatiz)

👉 [Buy Me a Coffee](https://buymeacoffee.com/leonardomatiz)






## 🔎 Keywords

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