claudiosanches · May 6, 2012 17:20
diff --git a/tooltip.html b/tooltip.html
 <!DOCTYPE html>
 <html dir="ltr" lang="pt-BR">
 <head>
 <title></title>
 <meta charset="UTF-8" />
 <style>
    /* oculta o tooltip na hora que carrega a página, é importante ter isso */
    .tooltip {
        display: none;
    }
 </style>
 <!-- como o tooltip esta em jQuery você precisa carregar a biblioteca jQuery antes,
 se no seu projeto já tiver o jQuery não vai precisar deste link -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script>
 // função que faz o tooltip
 // você não precisa e não deve personalizar ela.
 function simple_tooltip(target_items, name){
    jQuery(target_items).each(function(i){
        jQuery('body').append('<div class="' + name + '" id="' + name + i + '"><p>'+jQuery(this).attr('title')+'</p></div>');
        var my_tooltip = jQuery('#'+name+i);
        if(jQuery(this).attr('title') != ''){
            jQuery(this).removeAttr('title').mouseover(function(){
                my_tooltip.css({
                    opacity:0.8, 
                    display:'none'
                }).fadeIn(340);
            }).mousemove(function(kmouse){
                my_tooltip.css({
                    left:kmouse.pageX-60, 
                    top:kmouse.pageY+30
                    });
            }).mouseout(function(){
                my_tooltip.fadeOut(200);
            });
        }
    });
 }
 // Aqui você pode e deve personalizar
 $(document).ready(function() {
    // Primeiro valor 'a' define que elemento deve ter o tooltip
    // Será pego o title do elemento para aparecer no tooltip
    // Caso você queria que seja outro elemento que não for o 'a' pode usar igual css
    // por exemplo '.class a' ou '#id span' e por ai vai
    // você também pode inserir mais de um elemento igual css
    // exemplo: '.class a, #id span'
    // O 'tooltip' que temos ai no final é a classe que será usada para personalizar o css.
    simple_tooltip('a', 'tooltip');
 });
 </script>
 </head>
 <body>
    <a href="http://www.google.com/" title="Estando o tooltip, vamos ver se vai aparecer :D">Link</a>
 </body>
 </html>
	<!DOCTYPE html>
	<html dir="ltr" lang="pt-BR">
	<head>
	<title></title>
	<meta charset="UTF-8" />
	<style>
	/* oculta o tooltip na hora que carrega a página, é importante ter isso */
	.tooltip {
	display: none;
	}
	</style>
	<!-- como o tooltip esta em jQuery você precisa carregar a biblioteca jQuery antes,
	se no seu projeto já tiver o jQuery não vai precisar deste link -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
	// função que faz o tooltip
	// você não precisa e não deve personalizar ela.
	function simple_tooltip(target_items, name){
	jQuery(target_items).each(function(i){
	jQuery('body').append('<div class="' + name + '" id="' + name + i + '"><p>'+jQuery(this).attr('title')+'</p></div>');
	var my_tooltip = jQuery('#'+name+i);
	if(jQuery(this).attr('title') != ''){
	jQuery(this).removeAttr('title').mouseover(function(){
	my_tooltip.css({
	opacity:0.8,
	display:'none'
	}).fadeIn(340);
	}).mousemove(function(kmouse){
	my_tooltip.css({
	left:kmouse.pageX-60,
	top:kmouse.pageY+30
	});
	}).mouseout(function(){
	my_tooltip.fadeOut(200);
	});
	}
	});
	}
	// Aqui você pode e deve personalizar
	$(document).ready(function() {
	// Primeiro valor 'a' define que elemento deve ter o tooltip
	// Será pego o title do elemento para aparecer no tooltip
	// Caso você queria que seja outro elemento que não for o 'a' pode usar igual css
	// por exemplo '.class a' ou '#id span' e por ai vai
	// você também pode inserir mais de um elemento igual css
	// exemplo: '.class a, #id span'
	// O 'tooltip' que temos ai no final é a classe que será usada para personalizar o css.
	simple_tooltip('a', 'tooltip');
	});
	</script>
	</head>
	<body>
	<a href="http://www.google.com/" title="Estando o tooltip, vamos ver se vai aparecer :D">Link</a>
	</body>
	</html>