🎯 ngx-smart-tooltip

A modern, lightweight, and customizable tooltip library for Angular 18+. Built with Signals, Web Animations API, and OnPush strategy for maximum performance.

✨ Features

• 🚀 Modern: Built with Angular Signals and Standalone Directives.
• ⚡ Fast: Uses OnPush change detection and Web Animations API (no heavy generic animation modules).
• 🎨 Premium Design: Beautiful, responsive tooltips with rotatable square arrows that support borders and shadows.
• 🧩 Zero Dependencies: No popper.js or floating-ui. Self-contained positioning engine.
• ♿ Accessible: Manages aria attributes automatically.
• ✨ Animated: smooth fade, scale, and slide animations out of the box.

📦 Installation

npm install ngx-smart-tooltip

🚀 Usage

Since ngx-smart-tooltip is standalone, you simply import TooltipDirective into your component or app.config.ts.

1. Import

import { Component } from '@angular/core';
import { TooltipDirective } from 'ngx-smart-tooltip';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TooltipDirective], // <--- Import here
  template: `
    <button [ngxTooltip]="'Hello World'">Hover Me</button>
  `
})
export class AppComponent {}

2. Basic Examples

<!-- Simple text -->
<button [ngxTooltip]="'Simple Tooltip'">Hover Me</button>

<!-- With configuration -->
<button 
  [ngxTooltip]="'Bottom placement'" 
  tooltipPosition="bottom" 
  tooltipTheme="light">
  Configuration
</button>

<!-- Rich Content using TemplateRef -->
<ng-template #myTemplate>
  <strong>Bold Text</strong> and <em>Italic</em>
  <img src="icon.png" />
</ng-template>

<button [ngxTooltip]="myTemplate">Rich Content</button>

⚙️ Configuration

Input	Type	Default	Description
[ngxTooltip]	string | TemplateRef	''	Required. The content to display.
[tooltipPosition]	'top' | 'bottom' | 'left' | 'right' | 'auto'	'top'	Preferred position. Supports start/end (e.g. top-start).
[tooltipTrigger]	'hover' | 'click' | 'focus' | 'manual'	'hover'	Interaction that triggers the tooltip.
[tooltipTheme]	'dark' | 'light' | 'custom'	'dark'	Visual theme.
[tooltipAnimation]	'fade' | 'scale' | 'slide' | 'none'	'fade'	Entrance/exit animation style.
[tooltipArrow]	boolean	true	Show/hide the pointer arrow.
[tooltipShowDelay]	number	0	Delay in ms before showing.
[tooltipHideDelay]	number	100	Delay in ms before hiding.
[tooltipInteractive]	boolean	false	If true, user can hover over the tooltip content itself.
[tooltipMaxWidth]	number | string	300	Max width in pixels (e.g. 200 or '200px').
[tooltipClass]	string	''	Custom CSS class to add to the tooltip container.

🎨 Custom Styling

You can create your own themes using the customClass input or by overriding CSS variables.

Example: Gradient Theme

/* global styles or ViewEncapsulation.None */
.my-gradient-tooltip {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Match the arrow to the background */
.my-gradient-tooltip .ngx-tooltip-arrow {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

<button 
  [ngxTooltip]="'Cool Gradient!'" 
  tooltipClass="my-gradient-tooltip">
  Gradient Tooltip
</button>

🤝 Contributing

Contributions are welcome! Please submit a PR or open an issue.

📄 License

MIT