Question

对话框的内容不是在页面最初可见，而是在用户操作时显示额外的信息。

Toasts

Materialize 提供了非常简单的方法，来弹出一些信息，同时也不会让用户感到突兀。这些 Toasts 显示的位置和大小会随着你的设备的不同而改变。

在 JavaScript 中调用 Materialize.toast() 方法来使用。

// Materialize.toast(message, displayLength, className, completeCallback);
Materialize.toast('I am a toast!', 4000) // 4000 is the duration of the toast

一种方法是在 onclick 上添加这个方法。

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

自定义 HTML

传入一个自定义的 HTML 标签作为第一个参数。下面的例子中，我们传入了一段文字和按钮。如果你是在外部引用 JavaScript，可以不用单引号。

  var $toastContent = $('<span>I am toast content</span>');
  Materialize.toast($toastContent, 5000);
  

回调

你可以在 Toast 结束时提供一个回调函数来执行。

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

Toasts 样式

你可以非常简便的自定义 toasts 的样式，把样式名字作为一个函数参数传入到选项中即可。已经提供了一个圆角样式，当然你也可以自定义样式并应用上。

Materialize.toast('I am a toast!', 3000, 'rounded')
// 'rounded' is the class I'm applying to the toast

提示组件

提示组件是精简，富交互的文本提示。特别是当你用一个小图标时，提供一个工具提示能很方便的阐述这个小图标所具有的功能。

增加 Tooltipped 类到你的元素中并且增加 top，bottom，left，right 到 data-tooltip 来控制提示组件的位置。

<!-- data-position can be : bottom, top, left, or right -->
<!-- data-delay controls delay before tooltip shows (in milliseconds)-->
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">放在我上面</a>

初始化

提示组件式是自动初始化的，但是如果你要动态添加提示组件，你初始化他们。

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

jQuery 插件选项

选项名称	描述
delay	提示组件延迟显示的时间(默认：350)
tooltip	提示组件的文本，可以使用自定义的 HTML 如果设置了 html 选项。
位置	设置提示组件显示的位置，可选：'top', 'right', 'bottom', 'left'. (默认：'bottom')
html	允许使用自定义 html。 (默认: false)

去除

通过按钮去除提示组件，通过增加 'remove' 到提示组件方法中。

// This will remove the tooltip functionality for the buttons on this page
$('.tooltipped').tooltip('remove');