ngx-overflow-reveal

ngx-overflow-reveal is an Angular directive that automatically reveals the full text content on hover when it's overflowing its container. Perfect for truncated text, table cells, and responsive UIs.

Features

Automatic Detection - Detects text overflow automatically (both horizontal and vertical)
Hover Reveal - Shows full content in an overlay panel on mouse hover
Smart Positioning - Automatically adjusts position to stay within viewport bounds
Style Preservation - Matches typography, colors, and styling from the original element
Background Inference - Intelligently detects background color to ensure proper text visibility
Elevation Effect - Optional elevated appearance with subtle shadow
Configurable Delay - Optional delay before revealing the content on hover
Animation Control - Optional fade-in animation effect when revealing content
Lightweight - Zero dependencies (except Angular peer dependencies)
Performance Optimized - Runs outside Angular zone for optimal performance
Responsive - Updates on window resize and scroll events

Demo

Open the live demo on StackBlitz to try the directive without installing anything:

Online demo: https://stackblitz.com/github/hosembafer/ngx-overflow-reveal

Installation

npm install ngx-overflow-reveal

Usage

Import the directive in your component:

import { Component } from '@angular/core';
import { NgxOverflowRevealDirective } from 'ngx-overflow-reveal';

@Component({
  selector: 'app-demo',
  imports: [NgxOverflowRevealDirective],
  template: `...`
})
export class DemoComponent {
  longDescription = 'This is a very long description that would overflow the table cell...';
}

Apply it to any element that may overflow:

<!-- Basic usage -->
<div
  ngxOverflowReveal
  style="width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
  This is a very long text that will be truncated and revealed on hover
</div>

<!-- All options combined -->
<div
  ngxOverflowReveal
  [ngxOverflowRevealElevated]="true"
  [ngxOverflowRevealDelay]="500"
  [ngxOverflowRevealAnimated]="false"
  [ngxOverflowRevealMaxWidth]="400"
  [ngxOverflowRevealViewportPadding]="48"
  style="width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
  Fully customized reveal with all options
</div>

<!-- Table cell example -->
<table>
  <tr>
    <td
      ngxOverflowReveal
      [ngxOverflowRevealElevated]="true"
      style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
      {{ longDescription }}
    </td>
  </tr>
</table>

API

Directive Selector

[ngxOverflowReveal]

Inputs

Input	Type	Default	Description
`ngxOverflowRevealElevated`	`boolean`	`false`	Enables elevated appearance with box shadow for the reveal panel
`ngxOverflowRevealDelay`	`number`	`120`	Delay in milliseconds before revealing the content on hover
`ngxOverflowRevealAnimated`	`boolean`	`true`	Enables fade-in animation when revealing content
`ngxOverflowRevealMaxWidth`	`number \| undefined`	`undefined`	Maximum width in pixels for the revealed panel. When set, constrains the panel width while preserving left alignment. Content will wrap if it exceeds this width.
`ngxOverflowRevealViewportPadding`	`number`	`24`	Space in pixels between the revealed panel and the viewport edge. Used when automatically constraining panel width to prevent overflow.
`ngxOverflowRevealPanelClass`	`string \| string[] \| undefined`	`undefined`	CSS class(es) to apply to the revealed panel. Allows full customization of panel styling (e.g., custom shadow, border, background). Can be a single class name or an array of class names.

Behavior

The directive automatically:

Detects overflow - Monitors both scrollWidth > clientWidth and scrollHeight > clientHeight
Creates reveal panel - Generates a fixed-position overlay on mouseenter
Matches styles - Copies typography, colors, padding, and font rendering properties
Infers background - Walks up the DOM tree to find the first opaque background color
Adjusts position - Repositions if the panel would overflow the viewport
Cleans up - Removes panel on mouseleave and handles all event cleanup

Style Mirroring

The following styles are automatically mirrored from the host element to the reveal panel:

Typography: fontFamily, fontSize, fontWeight, fontStyle, letterSpacing, lineHeight
Text rendering: fontVariantNumeric, fontKerning, textRendering, -webkit-font-smoothing, -moz-osx-font-smoothing
Text styling: color, textTransform, textDecoration
Layout: Base padding values (with additional padding in revealed state)

Browser Compatibility

Works with all modern browsers that support:

ResizeObserver API
MutationObserver API
ES2015+

Performance Considerations

All mouse and scroll event listeners run outside Angular zone for optimal performance
ResizeObserver and MutationObserver are used for efficient change detection
Panel is created on-demand (only when overflow is detected)
Proper cleanup on component destroy prevents memory leaks

Development

Build the library

ng build ngx-overflow-reveal

Run the demo

You can run the demo locally:

ng serve

Navigate to http://localhost:4200/ to see the demo application.

Or open the live demo on StackBlitz to try it online without installing:

Online demo: https://stackblitz.com/github/hosembafer/ngx-overflow-reveal

Run tests

ng test ngx-overflow-reveal

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

hosembafer/ngx-overflow-reveal