- Materialize Tutorial
- Materialize - Home
- Materialize - Overview
- Materialize - Environment Setup
- Materialize - Colors
- Materialize - Grids
- Materialize - Helpers
- Materialize - Media
- Materialize - Shadows
- Materialize - Tables
- Materialize - Typography
- Materialize - Badges
- Materialize - Buttons
- Materialize - Breadcrumb
- Materialize - Cards
- Materialize - Chips
- Materialize - Collections
- Materialize - Footer
- Materialize - Form
- Materialize - Icons
- Materialize - Navbar
- Materialize - Pagination
- Materialize - Preloader
- Materialize - Collapsible
- Materialize - Dialogs
- Materialize - Dropdowns
- Materialize - Tabs
- Materialize - Waves
- Materialize Useful Resources
- Materialize - Quick Guide
- Materialize - Useful Resources
- Materialize - Discussion
Materialize - Dialogs
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.
Advertisements