Materialize CSS Dialogs, Working with Dialogs in Materialize CSS

Materialize CSS Tutorial

Materialize Dialogs

Materialize CSS Dialogs are content that are not originally visible on a page but show up with extra information if needed. Materialize CSS provides Toasts, Custom Toasts, Callback, Round Toasts, Tooltips and more..

Toasts

Materialize provides an alerts to user toasts. This toasts are also placed and sized responsively, try it out by clicking the button below on different device sizes.

Execute materialize toast please insert Materialize.toast(message, displayLength, className, completeCallback); function programatically in JavaScript.

<a class="btn" onclick="Materialize.toast('I am a toast', 4000)">Click Here!</a>

Output :

Callback

Callback method to be called once toast is dismissed.

 <a class="btn" onclick="Materialize.toast('I am a toast', 4000,'',function(){alert('Your toast was dismissed')})">
 	Click Here!
 </a>

Output :

Styling Toasts(Rounded)

We've added a rounded class for you, but you can create your own CSS classes and apply them to toasts.

<!-- Apply 'rounded' class to the toast -->
<a class="btn" onclick="Materialize.toast('I am a toast', 4000, 'rounded')">Click Here!</a>

Output :

Dismiss a Toast Programatically

To remove a specific toast using JavaScript, access the M_Toast toast HTML element and call the remove function.

$(document).ready(function(){
    $('.tooltipped').tooltip({delay: 50});
});

Tooltips

Materialize CSS Tooltips are small, interactive, textual hints for mainly graphical elements.

The Tooltipped classes are data-position (bottom, top, left, or right), data-delay (50, 100, ...), data-tooltip and more...

Initialization

Tooltips are initialized automatically, but if you have dynamically added tooltips.

$(document).ready(function(){
    $('.tooltipped').tooltip({delay: 50});
});

<div class="container">

    <a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="I am a tooltip">Top Tooltip</a>
    <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="I am a tooltip">Right Tooltip</a>
    <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Bottom Tooltip</a>
    <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="I am a tooltip">Left Tooltip</a>

</div>

Output :

Materialize CSS Tutorial