Universal Toaster

Overview

Universal Toaster is a plug-and-play JavaScript solution. It scans your page for any element with a title="Example" attribute, suppresses the browser's default tooltip, and replaces it with a sleek, hardware-accelerated floating label that follows the mouse.

• ⚡ Zero Dependencies: No jQuery, no CSS frameworks.
• 🌓 Auto-Contrast: Detects dark/light backgrounds automatically.
• 📐 Smart Positioning: Never goes off-screen (flips on edges).

Installation & Tutorial

1. Download toaster.js and place it in your project.

2. Or use hosted file

3. Add the script to the bottom of your HTML body.

<!-- Optional: Configuration (Place BEFORE the script) -->
<script>
  window.UniversalToasterConfig = {
        // COLORS
        // Set to null to allow Auto-Contrast (Recommended)
        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)"
    };
      // Leave colors null for auto-contrast
  };
</script>

<!-- Main Script -->
<script src="src/toaster.js"></script>

Interactive Playground

Hover over the elements below to see the script in action.