O Materialize possui a FeatureDiscovery, é um bom recurso para guiar o usuário em algumas funcionalidades do sistema, segue exemplo do site:
$('#menu').on('click', function() {
$('.tap-target').tapTarget('open');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Element Showed -->
<a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>
<!-- Tap Target Structure -->
<div class="tap-target" data-activates="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
Para ativar/desativar a exibição você utiliza:
$('.tap-target').tapTarget('open');
$('.tap-target').tapTarget('close');
Edit
Vi que o queria é diferente do que respondi, pode utilizar toast
, também do mesmo framework, segue exemplo:
$(document).on('click', '#toast-container .toast', function() {
$(this).fadeOut(function(){
$(this).remove();
});
});
var content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis lectus quis feugiat mattis. Maecenas varius orci et magna volutpat, vel vehicula velit imperdiet. Sed accumsan non sapien quis mattis. Nam tristique nunc in ligula venenatis porta. Quisque rhoncus elementum risus nec tincidunt. Curabitur et tempor turpis. Fusce facilisis orci vitae convallis lobortis. Mauris auctor blandit lectus vel pulvinar. Morbi non ipsum pharetra, interdum libero sed, viverra orci. Morbi semper placerat dui vulputate ornare. Aenean quis malesuada leo, sit amet pretium sapien. Aenean tristique interdum velit, tristique consectetur nisl vestibulum ac. Curabitur id tellus rhoncus, tristique libero vel, dignissim mauris. Etiam pellentesque venenatis sagittis. <i class="material-icons prefix right">close</i>';
Materialize.toast(content);
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Para utilizar basta usar o comando Materialize.toast("Conteúdo", tempo em milissegundos)
(o tempo é opcional), note que no final do conteúdo eu adicionei <i class="material-icons prefix right">close</i>
, isso serve apenas para exibir o "X" de fechar, funciona sem ele.
O código:
$(document).on('click', '#toast-container .toast', function() {
$(this).fadeOut(function(){
$(this).remove();
});
});
Serve para remover o aviso da tela ao ser clicado