🎯 ngx-smart-tooltip

A modern, lightweight (~5.4kb), zero-dependency tooltip library for Angular 21+

Built with Signals, Web Animations API, and OnPush strategy for maximum performance.

Live Demo | Documentation | GitHub

✨ Features

• 🚀 Modern Angular: Built with Angular 21+ Signals and Standalone Components
• ⚡ Blazing Fast: Uses OnPush change detection and native Web Animations API
• 🎨 Premium Design: Beautiful, responsive tooltips with rotatable square arrows
• 🧩 Zero Dependencies: No popper.js or floating-ui - self-contained positioning engine
• 📦 Lightweight: Only ~5.4kb minified + gzipped
• ♿ Accessible: Automatic ARIA attributes for screen readers
• 🎭 Rich Animations: Smooth fade, scale, and slide animations out of the box
• 🎯 Smart Positioning: Auto-adjusts position to stay within viewport
• 🎨 Customizable: Multiple themes and full CSS customization support
• 📱 Responsive: Works perfectly on mobile and desktop
• 🔧 TypeScript: Full TypeScript support with type definitions
• 🎪 Template Support: Use strings or TemplateRef for rich content

📦 Installation

npm install ngx-smart-tooltip

Or with yarn:

yarn add ngx-smart-tooltip

Or with pnpm:

pnpm add ngx-smart-tooltip

🚀 Quick Start

Since ngx-smart-tooltip is standalone, simply import TooltipDirective into your component:

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

That's it! You're ready to go! 🎉

📚 Usage Examples

Basic Tooltip

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

Different Positions

<button [ngxTooltip]="'Top Tooltip'" tooltipPosition="top">Top</button>
<button [ngxTooltip]="'Bottom Tooltip'" tooltipPosition="bottom">Bottom</button>
<button [ngxTooltip]="'Left Tooltip'" tooltipPosition="left">Left</button>
<button [ngxTooltip]="'Right Tooltip'" tooltipPosition="right">Right</button>

Position Alignment

<button [ngxTooltip]="'Aligned to start'" tooltipPosition="top-start">Top Start</button>
<button [ngxTooltip]="'Aligned to end'" tooltipPosition="top-end">Top End</button>

Themes

<button [ngxTooltip]="'Dark Theme'" tooltipTheme="dark">Dark</button>
<button [ngxTooltip]="'Light Theme'" tooltipTheme="light">Light</button>

Animations

<button [ngxTooltip]="'Fade Animation'" tooltipAnimation="fade">Fade</button>
<button [ngxTooltip]="'Scale Animation'" tooltipAnimation="scale">Scale</button>
<button [ngxTooltip]="'Slide Animation'" tooltipAnimation="slide">Slide</button>

Triggers

<button [ngxTooltip]="'Hover to show'" tooltipTrigger="hover">Hover</button>
<button [ngxTooltip]="'Click to show'" tooltipTrigger="click">Click</button>
<input [ngxTooltip]="'Focus to show'" tooltipTrigger="focus" placeholder="Focus me" />

Rich Content with TemplateRef

<ng-template #richContent>
  <div style="padding: 8px;">
    <strong>Rich Content</strong>
    <p>You can use <em>any</em> HTML here!</p>
    <img src="icon.png" alt="icon" />
  </div>
</ng-template>

<button [ngxTooltip]="richContent">Rich Tooltip</button>

Interactive Tooltips

<button 
  [ngxTooltip]="interactiveTemplate" 
  [tooltipInteractive]="true">
  Interactive Tooltip
</button>

<ng-template #interactiveTemplate>
  <div>
    <a href="https://example.com" target="_blank">Click this link!</a>
  </div>
</ng-template>

Custom Delays

<button 
  [ngxTooltip]="'Delayed tooltip'" 
  [tooltipShowDelay]="500" 
  [tooltipHideDelay]="200">
  Delayed
</button>

⚙️ API Reference

Inputs

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

Outputs

| Output | Type | Description | |--------|------|-------------| | (tooltipShow) | EventEmitter<void> | Emitted when the tooltip is shown. | | (tooltipHide) | EventEmitter<void> | Emitted when the tooltip is hidden. |

Methods

You can control the tooltip programmatically using template references:

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

@Component({
  template: `
    <button #tooltip="ngxTooltip" [ngxTooltip]="'Manual Control'">
      Controlled Tooltip
    </button>
    <button (click)="tooltip.show()">Show</button>
    <button (click)="tooltip.hide()">Hide</button>
    <button (click)="tooltip.toggle()">Toggle</button>
  `
})
export class MyComponent {
  @ViewChild('tooltip') tooltip!: TooltipDirective;
}

| Method | Description | |--------|-------------| | show() | Programmatically show the tooltip. | | hide() | Programmatically hide the tooltip. | | toggle() | Toggle the tooltip visibility. |

🎨 Custom Styling

Using Custom Classes

You can create your own themes using the tooltipClass input:

/* In your global styles.css or component styles with ViewEncapsulation.None */
.my-gradient-tooltip {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
  font-weight: 500;
}

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

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

CSS Variables

Override CSS variables for quick customization:

:root {
  --tooltip-bg-dark: #1a1a1a;
  --tooltip-text-dark: #ffffff;
  --tooltip-bg-light: #ffffff;
  --tooltip-text-light: #1a1a1a;
  --tooltip-border-radius: 8px;
  --tooltip-padding: 8px 12px;
  --tooltip-font-size: 14px;
  --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

🎯 Live Demo

Check out the interactive demo with live code examples and all features showcased!

🤝 Contributing

Contributions are always welcome! Please read our Contributing Guide before submitting a Pull Request.

Development Setup

# Clone the repository
git clone https://github.com/techasif/ngx-smart-tooltip.git

# Install dependencies
npm install

# Start the demo application
npm start

# Build the library
npm run build

# Run tests
npm test

📝 Changelog

See CHANGELOG.md for release history.

📄 License

MIT © TechAsif

💖 Support

If you find this library helpful, please consider:

• ⭐ Starring the GitHub repository
• 🐛 Reporting bugs or requesting features via GitHub Issues
• 📢 Sharing with the Angular community
• ☕ Buying me a coffee (optional)

🔗 Links

• Website: ngx-smart-tooltip.techasif.com
• NPM Package: npmjs.com/package/ngx-smart-tooltip
• GitHub: github.com/techasif/ngx-smart-tooltip
• Issues: github.com/techasif/ngx-smart-tooltip/issues

Made with ❤️ by TechAsif