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?
-
Tipo um tooltip. Considerando que saiba o que é um tooltip, qual seria exatamente a diferença entre o tooltip e aquilo que você procura?– Woss4/03/2018 às 21:00
-
Se for um tooltip, pode fazer dessa forma: pt.stackoverflow.com/q/101968/99718– Valdeir Psr4/03/2018 às 21:04
2 Respostas
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">
-
-
De nada amigo. Se acha que a resposta é a correta, considere marcar ✓. Abs!– Meu ovo7/03/2018 às 19:46
Se você quer algo simples pode usar a tag <abbr>
do HTML:
Site <abbr title="pt.stackoverflow.com">StackOverflow</abbr> em portugês