Fork me on GitHub
SnackbarJS

Create snackbars and toasts with ease.


SnackbarJS is a lightweight and jQuery powered plugin made to work in Bootstrap style, just like the Bootstrap tooltips work.
Using it is as easy as writing: <span data-toggle=snackbar data-content="This is my awesome snackbar!">Click me</span>


Options

There are some options to customize SnackbarJS look and beahvior:

var options =  {
    content: "Some text", // text of the snackbar
    style: "toast", // add a custom class to your snackbar
    timeout: 1000 // time in milliseconds after the snackbar autohides, 0 is disabled
}

$.snackbar(options);

Tip: SnackbarJS returns always a jQuery element which corresponds to the snackbar DOM element, you can use it to get the ID of it, or do any kind of stuff with it.



Interact with snackbars

Once you have created a snackbar you can show, hide or toggle it with: $("#snackbarid").snackbar("show");
$("#snackbarid").snackbar("hide");
$("#snackbarid").snackbar("toggle"); #snackbarid can be both the button with the data-toggle=snackbar attribute or the snackbar element.
Call it on a not-existing snackbar will create it before the specificed action.



Demo

To see SnackbarJS in action click the buttons below:
Show or hide a snackbar Show or hide a toast Create and show a snackbar. Create and show a toast.