A lightweight, zero-dependency JavaScript library that instantly modernizes your website's tooltips. It converts standard HTML title attributes into sleek, floating, single-line toast notifications that follow the mouse.
- Universal: Works on
div,span,a,button,input—anything with atitleattribute. - Smart Positioning: Viewport collision detection ensures tooltips never fly off-screen. (Flips Left/Up near edges).
- Auto-Theme: Automatically detects the page background brightness and adjusts tooltip colors for high contrast (Dark on Light / Light on Dark).
- Single Line: Enforces a clean
white-space: nowrapUI. - Zero Config: Works out of the box, or fully customizable via JS.
- Download the
src/toaster.jsfile. - Or use hosted file
- Link it at the end of your HTML
<body>.
<script src="src/toaster.js"></script><script src="https://megamind-solution.github.io/toaster/src/toaster.js"></script>You can customize the appearance by defining a global config object before loading 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)"
};
</script>Just add a standard title attribute to any HTML element.
<button title="Save changes to database">Save</button>
<a href="#" title="Go to Home Page">Home</a>MIT License. Feel free to use in personal and commercial projects.