JSFiddle - React, Tailwind, and code Playground

by Spokey

HTML

<button>Here goes nothing</button>
<input type='button' data-aToast='true' data-aToast-text='Hey there.' value='Woop woop!' />
<div style='display:inline-block'>I am a div!</div>

CSS

body, html {
    height:100%;
    width:100%;
    min-height:100%;
    padding:0;
    margin:0;
}
.aToast-view-message {
    width:200px;
    height:20px;
    height:auto;
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:10px;
    background-color: #383838;
    color: #F0F0F0;
    font-family: Calibri;
    font-size: 20px;
    padding:10px;
    text-align:center;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

JavaScript

(function ($) {
    $.fn.aToast = function (options) {

        var $this = $(this),
            settings = $.extend({
                fadeOut: 400,
                fadeIn: 400,
                delay: 3000,
                text: 'Whoops! Something happened and I showed up.',
                toastListenEvent: 'click',
                aClass: false
            }, options),
            $at = false,
            aTevents = false;

        settings.toastListenEvent = settings.toastListenEvent + ' a-Toast';
        settings.aClass = 'aToast-view-message' + (settings.aClass ? ' ' + settings.aClass : '')
        if ($('[data-aToast=true]:not(.aToast-init)').length) $this = $this.add($('[data-aToast=true]:not(.aToast-init)').addClass('aToast-init'));

        function _remove() {
            $(this).stop().remove();
        }

        function _displayDiv() {
            $('.aToast-view-message').hide();
            var $div = $('<div/>', {
                text: $(this).data('atoast-text') ? $(this).data('atoast-text') : settings.text,
                class: settings.aClass
            }).stop().fadeIn(settings.fadeIn)
                .delay(settings.delay)
                .fadeOut(settings.fadeOut, _remove)
                .appendTo('body');

            console.log($div[0]);
        }

        $this.not('[data-aToast=false]').on(settings.toastListenEvent, _displayDiv);

    };
}(jQuery));

$('button').aToast({
    aClass: 'users-dont-care-about-this-class-name'
});

$('div').aToast({
    aClass: 'hehe',
    toastListenEvent: 'mouseenter',
    text: 'Okay, this is not working'
});


/* or 

$().aToast({
    aClass: 'users-dont-care-about-this-class-name'
});

To listen to data-aToast only

*/