πŸš€ How It Works

Click any button below to show a notification. Then hover over the notification - it will pause the auto-dismiss timer! Move your mouse away and it resumes. This prevents notifications from disappearing while you're reading them, just like Sonner in Next.js! πŸš€

✨ Key Features

  • ⏸️ Hover to pause timer
  • ▢️ Move away to resume
  • 🎨 Beautiful animations
  • πŸ“± Fully responsive
  • ⚑ Smooth interactions
  • πŸ”§ Easy to use

πŸ§ͺ Test Notifications

Try different notification types and experience the hover functionality firsthand. Each notification has a 5-second timer that you can pause by hovering!

πŸ’» Code Example

Here's how easy it is to create notifications with hover functionality:

// Show a notification with hover-to-pause functionality notificationHelper.success("Your action was successful!", 5000); // The notification automatically supports hover-to-pause // No additional code needed!

πŸ’‘ Pro Tips

Make the most of the hover functionality:

  • 🎯 Hover over notifications to pause them
  • ⏱️ Perfect for reading longer messages
  • πŸ”„ Move mouse away to resume countdown
  • πŸ“± Works on all devices and screen sizes