1

sou iniciante e não sei direito como se chama... Queria por algumas explicações/definições de palavras/termos em algumas palavras do meu site. Tipo o usuário passa o mouse em cima da palavra e abre tipo um tooltip com a definição/explicação. Tem como? Como se chama isso? Existe algum "framework" pronto para isso?

2
  • Tipo um tooltip. Considerando que saiba o que é um tooltip, qual seria exatamente a diferença entre o tooltip e aquilo que você procura?
    – Woss
    4/03/2018 às 21:00
  • Se for um tooltip, pode fazer dessa forma: pt.stackoverflow.com/q/101968/99718 4/03/2018 às 21:04

2 Respostas 2

1

Pode usar o Tooltip Widget do jQuery UI. É simples de usar e você pode customizar como quiser.

O que você precisa?

Apenas carregar as bibliotecas do jQuery e o jQuery UI na sua página:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Iniciar o plugin:

<script>
$(function(){
   $(document).tooltip();
});
</script>

E em seguida adicionar o atributo title="texto do tooltip" em qualquer elemento em que você queira que apareça o balãozinho ao passar o mouse.

No exemplo abaixo, adicionei o title nos tags <b> e <strong> (em negrito). Mas você também pode colocar em um texto qualquer, basta colocar o texto entre <span></span> e adicionar title no span. Passe o mouse sobre eles para ver o efeito:

$(function(){
   $(document).tooltip();
});
span{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>Lorem ipsum <b title="Tooltip deste texto">dolor sit amet</b>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <strong title="Tooltip para este texto">laboris nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span title="Explicaçãono tooltip">Excepteur sint occaecat</span> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<input type="text" title="Tooltip no input" placeholder="Passe o mouse">

2
  • Obrigado, era exatamente o que eu queria! Testei e funcionou. 7/03/2018 às 18:03
  • De nada amigo. Se acha que a resposta é a correta, considere marcar ✓. Abs!
    – Meu ovo
    7/03/2018 às 19:46
0

Se você quer algo simples pode usar a tag <abbr> do HTML:

Site <abbr title="pt.stackoverflow.com">StackOverflow</abbr> em portugês

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .