Toaster

Bootstrap Toast Component helper that provide easy build of instant toast.

Bootstrap 4.2 come with new component called Toast. As always, you've to build the component with HTML and require JavaScript action to open in. This helper provide easy way to build toast without the need to build the HTML part, to make it easy to work with toast with-in JavaScript.

Please note that the element is removed right after disappear from screen.

Overview

Things to know when using the toast helper

  1. The bootstrap version must be greater then or equal to 4.2
  2. If you're building Bootstrap JavaScript from source, make sure Toast plugin is included.
  3. This helper developed and tested under Bootstrap 4.3.1

Examples

Basic

This is the very basic toast. The toast has only content text in it. Calling $.toaster(/content/) will only show the content toast it self, except other options alredy been be set by calling $.toaster.setDefault(/options/).


<button type="button" class="btn btn-primary" onclick="op1()">
    Launch demo toast
</button>

<script>
    function op1(){
        $.toaster('Hello, world! This is a toast message.')
    }
</script>

With Title

Adding the second parameter on calling $.toaster function will add title to the toast.


<button type="button" class="btn btn-primary" onclick="op2()">
    Launch demo toast
</button>

<script>
    function op2(){
        $.toaster('Hello, world! This is a toast message.', 'Bootstrap Toaster')
    }
</script>

With Title And Info

To add more parameters to the title, please use object as the title instead of string..


<button type="button" class="btn btn-primary" onclick="op3()">
    Launch demo toast
</button>

<script>
    function op3(){
        $.toaster('Hello, world! This is a toast message.', {
            text: 'Bootstrap Toaster',
            info: '11 mins ago'
        })
    }
</script>

With Title And Image

To add more parameters to the title, please use object as the title instead of string..


<button type="button" class="btn btn-primary" onclick="op3a()">
    Launch demo toast
</button>

<script>
    function op3a(){
        $.toaster('Hello, world! This is a toast message.', {
            text: 'Bootstrap Toaster',
            image: 'http://...'
        })
    }
</script>

With Title And Icon

To add more parameters to the title, please use object as the title instead of string..


<button type="button" class="btn btn-primary" onclick="op3b()">
    Launch demo toast
</button>

<script>
    function op3b(){
        $.toaster('Hello, world! This is a toast message.', {
            text: 'Bootstrap Toaster',
            icon: 'fa fa-heart'
        })
    }
</script>

Position

Toast can be put on a different position. Combine vertical position ( top, bottom ) and horizontal position ( left, center, or right ) to put it other place on screen.


<button type="button" class="btn btn-primary" onclick="op4()">
    Launch demo toast
</button>
<script>
    function op4(){
        $.toaster({
            content: 'Hello, world! This is a toast message.',
            position: 'bottom left'
        })
    }
</script>

JavaScript

Options

Below are all options accepted for .toaster function:

NameTypeDefaultDescription
title (string|object) false Toast title, it can be a string or object with other properties
content string "" The toast body text. This is the only required property.
delay int 4000 The delay time before the toast removed from document.
position string top right The position where toast should be put. The value should be combination of vertical position ( top, or bottom ), and horizontal position ( left, center, or right ) separated by space.

While the title property as object accept below options:

NameTypeDefaultDescription
text string "" The toast title text.
icon string false The toast icon class as <i> element. (e.g "fa fa-peace").
image string false The toast icon src as <img>. If this property exists, property icon is ignored.
close boolean true Show or hide the close button of the toast.
info text "" Additional text info (e.g 11 mins ago).

Methods

There's only one method known so far, which is setDefault to set default options of the toast.

.setDefault(opts)

Set default options for the toast for future implementation.


$.toaster.setDefault({
    title: {
        text: 'Awesome',
        icon: 'fa fa-peace',
        info: 'just now',
        close: true
    },
    content: 'Default content',
    delay: 500,
    position: 'top left'
});