Ao carregar a página já é apontado o erro no console:
jQuery.Deferred exception: $(...).tooltispter is not a function @file:///C:/Users/Geovane/Desktop/Alura/JQuery/alura-typer/public/js/main.js:17:3
mightThrow@file:///C:/Users/Geovane/Desktop/Alura/JQuery/alura-typer/public/js/jquery.js:3508:21
resolve/</process<@file:///C:/Users/Geovane/Desktop/Alura/JQuery/alura-typer/public/js/jquery.js:3576:12
undefined jquery.js:3784:3
TypeError: $(...).tooltispter is not a function[Learn More]
Códigos:
$(function() {
atualizaTamanhoFrase();
inicializaContadores();
inicializaCronometro();
inicializaMarcadores();
$("botao-reiniciar").click(reiniciaJogo);
atualizaPlacar();
$("#usuarios").selectize({
create: true,
sortField: 'text'
});
$(".tooltip").tooltispter({
trigger: "custom"
});
});
function sincronizaPlacar() {
//os cógidos não relacionado foram omitidos
$.post("http://localhost:3000/placar", dados, function() {
console.log("Placar sincronizado com sucesso");
$(".tooltip").tooltispter("open");
}).fail(function() {
$(".tooltip").tooltipster("open").tooltipster("content","Falha ao sincronizar");
}).always(function() {
setTimeOut(function() {
$(".tooltip").tooltipster("close");
}, 1200);
});
});
}
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
<link rel="stylesheet" href="css/libs/materialize.min.css">
<link rel="stylesheet" href="css/libs/google-fonts.css">
<link rel="stylesheet" href="css/libs/selectize.default.css">
<link rel="stylesheet" href="css/libs/tooltipster.bundle.min.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
//...
<a id="botao-sync" class="btn-floating btn-large waves-effect waves-light yellow tooltip" title="Sincronizado com Sucesso">
<i class="material-icons">swap_vert</i>
</a>
//...
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/placar.js"></script>
<script src="js/jogo.js"></script>
<script src="js/frase.js"></script>
<script src="js/selectize.js"></script>
<script src="js/tooltipster.bundle.min.js"></script>