SnackbarJS

SnackbarJS is a lightweight and jQuery powered plugin made to work just like the tooltips in Bootstrap.

Include it in your html page with:

...

To use it in HTML:

Click me

or with javascript:

$.snackbar({content: "This is my awesome snackbar!"});

Options

Following options are supported to customize look and behaviour:

var options = {
content: "Some text", // text of the snackbar
style: "toast", // add a custom class to your snackbar
timeout: 100, // time in milliseconds after the snackbar autohides, 0 is disabled
htmlAllowed: true, // allows HTML as content value
onClose: function(){ } // callback called when the snackbar gets closed.
}

$.snackbar(options);

Or in HTML:

data-content="Some text"
data-style="toast"
data-timeout="100"
data-html-allowed="true">
Click me

Tip: SnackbarJS returns always a jQuery element which corresponds to the snackbar DOM element, you can use it to get the ID of the element, and then do other operations with it.

Heads up!: The onClose callback is not available using the HTML syntax.

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.
Calling it on a non-existing snackbar will create it before executing the specificed action.

Demo

To see SnackbarJS in action visit the demo page.

Browserify
----------
This library is UMD compatible, so you can use it in this way:

``javascript
var jquery = require('jquery');
require('snackbarjs');

var options = {
...
}

jquery.snackbar(options);
``