Universal Toaster

A lightweight, API-driven library to transform boring native tooltips into rich, interactive, and modern UI elements for any web project.

Why Choose Universal Toaster?

🚀 API Driven

Control the entire lifecycle with init(), destroy(), and updateConfig(). Perfect for SPAs (React, Vue, Svelte) and extensions.

🎨 Rich Text Engine

Go beyond plain text. Add lists, links, icons, images, custom fonts, and colors directly inside your title attribute using simple shortcodes.

💡 Web App Ready

With Shadow DOM support and a `MutationObserver`, tooltips work reliably on dynamic content and complex web components out of the box.

Developer's Guide

How It Works

The library works in three simple steps:

  1. Scan & Swap: On initialization, it scans the DOM for elements with a `title` attribute. It moves the content to a `data-toaster-title` attribute to prevent the native browser tooltip from appearing.
  2. Listen & Parse: It listens for `mouseover` events. When you hover over a target element, it reads the data attribute and parses any rich text shortcodes into styled HTML.
  3. Position & Display: It calculates the optimal position for the tooltip, ensuring it never goes off-screen (even on mobile), and displays it with a subtle fade-in effect.

API Controls

Control the library programmatically. Here are the core methods:

// Initialize the library with custom settings
UniversalToaster.init({
  delay: 200,          // ms before showing
  backgroundColor: null,   // e.g. "#333"
  textColor: null,   // e.g. "#fff"
  // TYPOGRAPHY
  fontFamily: "inherit", // Uses page font
  fontSize: "13px",
  fontWeight: "500",
  // SHAPE
  borderRadius: "6px",
  padding: "8px 12px",
  boxShadow: "0 4px 12px rgba(0,0,0,0.15)"
});

// Update settings on the fly
UniversalToaster.updateConfig({ borderRadius: '20px' });

// Cleanly remove all listeners and elements (for SPAs)
UniversalToaster.destroy();

Live Demos & Examples

✅ Checklists & Dividers

Use lists and horizontal rules (&hr;) to structure information clearly.

🔗 Interactive Links

Using &lnk=; makes the tooltip interactive, allowing users to hover and click links.

🖼️ Rich User Profile

Combine images, icons, and text styles to create detailed profile cards.

🛍️ Product Preview

Perfect for e-commerce sites to show quick product details without a full modal.

↔️ Custom Width

Use &w=400px; to override the default width for content like code snippets.

🌓 Auto-Theme

The library detects the dark background and automatically inverts the tooltip colors for high contrast.