Growl Growl is a notification widget to display messages as an overlay.

Growl is a notification widget to display messages as an overlay.

//initialize
$('#default').puigrowl();

//show messages
$('#default').puigrowl('show', [{severity: 'info', summary: 'Message Summary', detail: 'Message Detail'}]);
                                
<div id="default" />   
                                
Name Type Default Description
sticky boolean false Sticky messages do not disappear after a timeout defined by life.
life int 3000 Defines timeout in milliseconds to remove messages.

No events.

Name Parameters Description
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.
<script type="text/javascript">
    $(function() {
        $('#default').puigrowl();                

        $('#btn-info').click(function() {
            addMessage([{severity: 'info', summary: 'Message Title', detail: 'Message Detail here.'}]);
        });

        $('#btn-warn').click(function() {
            addMessage([{severity: 'warn', summary: 'Message Title', detail: 'Message Detail here.'}]);
        });

        $('#btn-error').click(function() {
            addMessage([{severity: 'error', summary: 'Message Title', detail: 'Message Detail here.'}]);
        });

        $('#btn-multiple').click(function() {
            addMessage([{severity: 'info', summary: 'Message Title', detail: 'Message Detail here.'}
                ,{severity: 'warn', summary: 'Message Title', detail: 'Message Detail here.'}
                ,{severity: 'error', summary: 'Message Title', detail: 'Message Detail here.'}]);
        });

        addMessage = function(msg) {
            $('#default').puigrowl('show', msg);
        }

        $('#content button').puibutton();
    });
</script>
                                
<div id="default" />

<button id="btn-info" type="button">Info</button>
<button id="btn-warn" type="button">Warn</button>
<button id="btn-error" type="button">Error</button>
<button id="btn-multiple" type="button">Multiple</button>