materialize provides various special methods to show unobtrusive alerts to the users. materialize provides a term toast for them. following is the syntax to show a dialog as a toast.

materialize.toast(message, displaylength, classname, completecallback);

where,

message − message to be displayed to the user.
displaylength − duration of the message after which it will disappear.
classname − style class to be applied to the toast. for example, 'rounded'.
completecallback − callback method to be called once toast is dismissed.

for tooltip, materialize provides the following css classes.

sr.no.	class name & description
1	tooltipped identifies a component to have a tooltip.
2	data-position position of the tooltip; bottom, top, left, or right.
3	data-delay sets the duration of the tooltip after which it will disappear.
4	data-tooltip sets the tooltip contents.

example

following example demonstrates the use of toasts and tooltips.

<html>
   <head>
      <title>the materialize dialogs example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
         <script>
            function showtoast(message, duration){
               materialize.toast(message, duration);
            }
            function showtoast1(message, duration){
               materialize.toast('<i>'+ message + '</i>', duration);
            }
            function showtoast2(message, duration){
               materialize.toast(message, duration, 'rounded');
            }
            function showtoast3(message, duration){
               materialize.toast('hello world!', duration, '', function toastcompleted(){
                     alert('toast dismissed!');
            });
         }
      </script>
   </head>
   <body class="container">
      <h4>toasts</h4>
      <a class="btn" onclick="showtoast('hello world!', 3000)">normal alert!</a>
      <a class="btn" onclick="showtoast1('hello world!', 3000)">italic alert!</a>
      <a class="btn" onclick="showtoast2('hello world!', 3000)">rounded alert!</a>
      <br/><br/>
      <a class="btn" onclick="showtoast3('hello world!', 3000)">callback alert!</a>
      <h4>tooltips</h4>
      <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="i am in bottom!">bottom</a>
      <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="i am in left!">left</a>
      <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="i am in right!">right</a>
      <a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="i am in top!">top</a>
   </body>
</html>

output

verify the output.

Previous Lesson

Next Lesson