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>
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>
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>
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});
});
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...
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>