Programação

Tooltip com jQuery e CSS

Alô alô terráqueo mais um tutorial fácil e de grande utilidade pra você, vou ensinar como criar um tooltip com jQuery e CSS para input, imagem e link.

Mas para que eu iria usar um tooltip no meu site? Você pode criar pequenos exemplos de preenchimento do input, pode dar uma informação sobre a imagem, explicar mais sobre um link e inúmeras outras possibilidades, mas chega de papo e vamos ao que interessa.

Clique aqui e veja o exemplo

Criando um tooltip com jQuery e CSS

Passo 1: O jQuery

Vamos inserir o jQuery na nossa página e você pode colocar entre as tags ou no rodapé do seu site (forma recomendada). Veja abaixo que estamos usando uma biblioteca jQuery versão 1.8 e esta sendo carregada direto da API do Google. Caso você já esteja chamando o jQuery na sua página, ignore essa etapa, caso você precise, veja esse post sobre conflito de jQuery.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Passo 2: add o jQuery UI

Você pode fazer o download do jQuery UI aqui ou pode usar ele direto do desenvolvedor (não recomendado), a diferença pro tutorial, será apenas o caminho que você vai colocar pra chamar seu arquivo, no exemplo abaixo, estou pegando direto do do desenvolvedor.

<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

É isso, incluído o jQuery e o jQuery UI vamos para o próximo passo.

Passo 3: O conteúdo do tooltip

Pra deixar mais organizado o código, vou criar 3 variáveis que serão os conteúdos dos nossos tooltips de exemplo, sendo eles: input, link e imagem.

O bacana de usar o jQuery UI é que dá pra usar tags básicas de HTML pra exibição do conteúdo, então as variáveis ficaram dessa maneira (reparem nas marcações HTML).

PHP

<?php $imagem = 'Album que reúne as <b>melhores</b> imagens do campeonato de Longboard da <i>Califórnia</i>';?>
<?php $input = '<b>Exemplo:</b><br>- Programador</br>- Designer</br>- Redator';?>
<?php $link = 'O <b>WordPress<b> é uma plataforma semântica de vanguarda para publicação pessoal, com foco na estética, nos Padrões Web e na <u>usabilidade</u></span>.';?>

Criada as variáveis para o nosso tooltip com jQuery, agora vamos criar o HTML.

Passo 4: O HTML

Pra que a gente siga o exemplo, criei um input, um link e uma imagem, mas na verdade o segredo de tudo esta nos id´s dos elementos, usaremos ele para ativar o tooltip e também o title que é quem vai exibir o conteúdo das variáveis que criamos no passo anterior, então o código ficou assim.

HTML

<h4>Exemplo com input</h4>
<p><label>Profissão:</label><input type="text" name="input" id="input" title="<?php echo $input;?>" /></p>
<h4>Exemplo com link</h4>
<p><a href="#" rel="nofollow" id="link" title="<?php echo $link;?>">WordPress</a></p>
<h4>Exemplo com imagem</h4>
<img src="http://placehold.it/200x200.gif" id="imagem" title="<?php echo $imagem;?>" />

É isso, agora no próximo passo vamos criar o script que vai fazer nosso tooltip funcionar direito, aceitando conteúdos com as tags básicas de HTML.

Passo 5: O script

Bom, você deve adicionar esse código, também dentro das tags do seu site. Como disse no passo anterior, vamos usar o id dos elementos pra ativar o tooltip, nosso script vai ser mais ou menos assim:

JS

<script type=text/javascript>
// TOOLTIP
var $j = jQuery.noConflict();
// Use jQuery com a variavel $j(...)
$j(document).ready(function(){
$j('#imagem, #link, #input, #textarea').tooltip({ // ID dos elementos que vão exibir o tooltip
content: function () {
return $j(this).prop('title'); // Retorna o titulo do elemento no tooltip
}
});
});
</script>

Agora o tooltip já deve estar funcionando, mas sem formatação nenhuma, então no próximo passo é ajustar o CSS.

Passo 6: O CSS

Obviamente você deve alterar conforme suas necessidades, no exemplo, o CSS usado foi esse.

CSS

.ui-tooltip {
	padding: 12px;
	position: absolute;
	z-index: 9999;
	max-width: 400px;
	-webkit-box-shadow: 0 0 8px #aaa;
	box-shadow: 0 0 8px #aaa;
	background:#000;
	line-height:1.2;
	color:#FFF;
}
body .ui-tooltip {
	border-width: 2px;
}

Pronto, agora se você seguiu todos os passos desse tutorial, você já deve ter o seu tooltip funcionando e com a formatação igual ao do exemplo.

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

FONTE: jQuery UI

E você, o que achou do tutorial de como criar tooltip com jQuery e CSS? Fácil? Ficou com dúvidas? Comente.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado