Press "Enter" to skip to content

A Simple jQuery Based Android Style Toast Plugin | eatoast

Eatoast is a simple jQuery-based plugin that creates an Android-style toast to display feedback messages (default, success, info, warning, and danger) in a small popup.

custom toast in android, how to display toast message in android, toast android example, android toast duration, toast view deprecated, toast setgravity not working

Bootstrap 5 Toast & Snackbar Easier to Use

How to make use of it:

1. Load the jQuery eatoast plugin stylesheet for basic toast styles.

<link href="src/jquery.eatoast.css" rel="stylesheet">

2. Load the jQuery eatoast plugin script after the jQuery library.

<script src="//"></script>
<script src="src/jquery.eatoast.js"></script>

3. Create toast messages as follows:

// Default
$"This is a default toast.");

// Success
$.toast.success("This is a success toast.");

// Info
$"This is a info toast.");

// Warning
$.toast.warn("This is a warning toast.");

// Danger
$.toast.danger("This is a dange toast.");

4. Options available to customize your toast messages.


// How long the toast stays
duration: 3000,

// The text to be shown
text: '',

// The container of the toast.
container: document.body,

// The text color
color: '#333',

// The background color
background: '#F5F5F5',

// The toast boader's css value
border: 'none',

// The class you want to add on the toast. 
style: '',

// Whether the toast will hide automatically.
autoclose: true,

// Show the close button
closeBtn: false,

// The width of the toast
width: 'auto',

// fade or slide
animate: 'fade', 

// You can change whether the toast appear from the bottom or the top
align: 'top',

// The animation speed, number or jQuery.fx.speeds.
speed: 'fast',

// The opacity of the toast.
opacity: 0.9,

// The offset position, percentage or number.
position: '20%'


Android-style Simple jQuery Toast, jquery-eatoast Plugin/Github

See Demo And Download

Official Website(HakurouKen): Click Here

This superior jQuery/javascript plugin is developed by HakurouKen. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.