Devextreme Toast Wrapper for Global Widget Configuration

While using Devextreme toast widget, you may need to configure it. By default, toast widget placed bottom middle of window. In this article, I write a wrapper javascript code to configure widget globally, and I provide to show widged at bottom right of window and widget will be continuing to display content while mouse hover on it. This wrapper code is also compatible with older browsers. 

Wrapper code is dependent to Jquery.

dx-toast-wrapper.js:

var toastDefault = {

            width: "500px",
            displayTime: 4000,
            cancelHiding: false,

            contentTemplate: null,

            position: {

                at: "right bottom",
                collision: "fit",
                boundaryOffset: "20 20",

            },

            onContentReady: function (e) {

                $(e.element).on("mouseenter", function () {

                    this.cancelHiding = true;

                }.bind(this));

                $(e.element).on("mouseleave", function () {

                    this.cancelHiding = false;
                    e.component.hide();

                }.bind(this));
            }.bind(this),

            onHiding: function (e) {

                e.cancel = this.cancelHiding;

            }.bind(this)
        };

        var toast = {

            success: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "success";

                DevExpress.ui.notify(toastDefault);
            },
            error: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "error";

                DevExpress.ui.notify(toastDefault);
            },
            info: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "info";

                DevExpress.ui.notify(toastDefault);
            },
            warning: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "warning";

                DevExpress.ui.notify(toastDefault);
            }
        }

You can use Devextreme toast like that:

index.html:

<script>
toast.success("Success message");
toast.error("Error message");
toast.info("Info message");
toast.warning("Warning message");
</script>