Nessa vídeo aula vamos aprender a como criar um efeito Tooltip com jQuery, que é um balão de contexto, que usado para informar detalhes de determinado conteúdo, podendo ser expandido para outras funcionalidade. Espero que gostem, e boa aula.
Código da Vídeo Aula :
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>ToolTip</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
</head>
<body>
<div style="height:100px"></div>
<a href="#" rel="tooltip" title="Texto de Exemplo do Efeito">Link de Exemplo</a>
</body>
</html>
css/styles.css
.tooltip{
position:absolute;
display:none;
padding: 10px 30px;
background:#000;
color:#fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
js/tooltip.js (modifiquei para não aparecer o valor title no navegador)
$(function(){
$("*[rel=tooltip]").hover(function(e){
var title = $(this).attr('title');
$(this).data('titleText', title).removeAttr('title');
$("body").append('<div class="tooltip">'+title+'</div>');
$('.tooltip').css({
top : e.pageY - 50,
left : e.pageX + 20
}).fadeIn();
}, function(){
$(this).attr('title', $(this).data('titleText'));
$('.tooltip').remove();
}).mousemove(function(e){
$('.tooltip').css({
top : e.pageY - 50,
left : e.pageX + 20
})
})
});
Muito boa vídeo aula DAVID!! Parabéns!!
Eu consegui fazer o que você ensinou, mas estou com um problema:
Além de aparecer o tooltip da vídeo-aula, aparece também e, ao mesmo tempo, o tooltip padrão do navegador.
Como resolvo isso?
Vc pode utilizar o removeAttr
Postei o código na descrição da vídeo aula com essa alteração, dá uma olhada.
Perfeito!!
Muito obrigado DAVID.
Excelente, excelente.
muito boa a aula, me ajudou de mais, valeu!
Muito bom.
Muito boa video aula, mais eu queria saber uma coisa, quando voce estava no notpad++ , voce digitou: link:css, e ja apareceu o css , é um plugin , caso seja tem como me falar o nome?
bruno , o nome do plugin é zen coding, ele tem para vários editores, é uma mão na roda.
olá, em primeiro momento gostaria de elogiar sua didatica em seguida gostaria de saber como faço pra esse tooltip surgir sempre no mesmo lugar, e como poderia fazer ele carregar o conteudo de uma div inteira.
vlw André. Vc pode tentar fazer algo assim:
http://jsfiddle.net/4F5Ja/2/
Muito bom tutorial ! Continue fazendo ..
Consegui fazer com facilidade ! ;]
Tem como fazer um tutorial de como o usuário curtir minha página do facebook, pelo meu site ?
Quero aprender sem ser pelo WP ..
abç !