Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 16
Tutorial para Criar Tooltips

Nesse tutorial vamos mostrar como criar tooltips. Tooltip é uma espécie de mensagem ou dica que aparece geralmente em campos de formulário para informar aos usuários o tipo de conteúdo que deve ser preenchido. Basta passar o cursor do mouse sobre o campo para que a dica apareça. O tooltip também é usado em imagens, botões, sites etc.
Exemplo 1:
Nesse exemplo vamos carregar duas imagens e criar um tooltip em cada uma para informar o que elas representam:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI Tooltip - Dica sobre Imagens</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .photo { width: 300px; text-align: center; } .photo .ui-widget-header { margin: 1em 0; } .map { width: 350px; height: 350px; } .ui-tooltip { max-width: 350px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( document ).tooltip({ items: "img, [data-geo], [title]", content: function() { var element = $( this ); if ( element.is( "[data-geo]" ) ) { var text = element.text(); return "<img class='map' alt='" + text + "' src='http://maps.google.com/maps/api/staticmap?" + "zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" + text + "'>"; } if ( element.is( "[title]" ) ) { return element.attr( "title" ); } if ( element.is( "img" ) ) { return element.attr( "alt" ); } } }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>Bandeira do Acre</h2> <h3>Acre - Brasil</h3> </div> <a href="http://simuladosetutoriais.com/tutoriais/jquery/imagens/Acre.jpg"> <img src="imagens/Acre.jpg" alt="Bandeira do Acre" class="ui-corner-all"> </a> </div> <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>Bandeira de Alagoas</h2> <h3>Alagoas - Brasil</h3> </div> <a href="http://simuladosetutoriais.com/tutoriais/jquery/imagens/Alagoas.jpg"> <img src="imagens/Alagoas.jpg" alt="Bandeira de Alagoas" class="ui-corner-all"> </a> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Após executar o código, passe o cursor do mouse sobre cada bandeira que a dica será mostrada.

Exemplo 2:
Esse exemplo vamos criar algumas dicas nos campos de um formulário de forma que o usuário saiba o que preencher.
Use o botão abaixo para exibir os textos de ajuda ou apenas foque ou passe o mouse sobre as entradas individuais. Uma largura fixa é definida em CSS para fazer com que as dicas de ferramenta pareçam consistentes quando exibidas todas de uma vez.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI - Tooltip em Formulários</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> label { display: inline-block; width: 5em; } fieldset div { margin-bottom: 2em; } fieldset .help { display: inline-block; } .ui-tooltip { width: 210px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { var tooltips = $( "[title]" ).tooltip({ position: { my: "left top", at: "right+5 top-5", collision: "none" } }); $( "<button>" ) .text( "Mostrar Dicas" ) .button() .on( "click", function() { tooltips.tooltip( "open" ); }) .insertAfter( "form" ); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <form> <fieldset> <div> <label for="firstname">Primeiro Nome:</label> <input id="firstname" name="firstname" title="Digite seu primeiro nome"> </div> <div> <label for="lastname">Último Nome:</label> <input id="lastname" name="lastname" title="Digite seu último nome"> </div> <div> <label for="address">Endereço:</label> <input id="address" name="address" title="Endereço de casa ou trabalho"> </div> </fieldset> </form> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 3:
Nesse exemplo vamos utilizar um vídeo, que pode ser qualquer um de sua preferência, com botões de curtir/compartilhar/estatísticas, cada um com uma dica de ferramenta personalizada e colado no conteúdo da guia.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente Tooltip - Demo de um Video Player</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .player { width: 500px; height: 300px; border: 2px groove gray; background: #ccc; text-align: center; line-height: 300px; } .ui-tooltip { border: 1px solid white; background: #111; color: white; } .ui-menu { position: absolute; } .set { display: inline-block; } .notification { position: absolute; display: inline-block; font-size: 2em; padding: .5em; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { function notify( input ) { var msg = "Selected " + String.prototype.trim.call( input.data( "tooltip-title" ) || input.text() ); $( "<div>" ) .appendTo( document.body ) .text( msg ) .addClass( "notification ui-state-default ui-corner-bottom" ) .position({ my: "center top", at: "center top", of: window }) .show({ effect: "blind" }) .delay( 1000 ) .hide({ effect: "blind", duration: "slow" }, function() { $( this ).remove(); }); } $( "button" ).each(function() { var button = $( this ).button({ icons: { primary: $( this ).data( "icon" ) }, text: !!$( this ).attr( "title" ) }); button.not( ".menu" ).on( "click", function() { notify( button ); }); }); $( ".set" ).controlgroup({ items: { "button" : "button" } }); $( "button.menu" ) .on( "click", function() { $( document ).tooltip( "close", { currentTarget: this }); var menu = $( this ).next().show().position({ my: "left top", at: "left bottom", of: this }); $( document ).one( "click", function() { menu.hide(); }); return false; }) .next() .hide() .menu({ selected: function( event, ui ) { notify( ui.item ); } }); $( document ).tooltip({ position: { my: "center top", at: "center bottom+5", }, show: { duration: "fast" }, hide: { effect: "hide" } }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <div class="player">Coloque seu vídeo aqui</div> <div class="tools"> <span class="set"> <button data-icon="ui-icon-circle-arrow-n" title="Eu gostei disto">Like</button> <button data-icon="ui-icon-circle-arrow-s">Eu não gostei disto</button> </span> <div class="set"> <button data-icon="ui-icon-circle-plus" title="Adicione para assistir mais tarde">Adicionar</button> <button class="menu" data-icon="ui-icon-triangle-1-s">Adicionar aos Favoritos ou Playlist</button> <ul> <li><div>Favoritos</div></li> <li><div>Funnees</div></li> <li></li> <li><div>Nova playlist...</div></li> </ul> </div> <button title="Compartilhe esse video">Compartilhar</button> <button data-icon="ui-icon-alert">Flag de Inapropriado</button> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Criar Conteúdos com Guias
Tutorial para Criar Efeitos com Textos >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino