/*
liveToolTip - Plugin JQuery
par Eric BATARSON - eric.batarson@gmail.com - http://www.eric-batarson.fr
Description :
plugin permettant de générer une bulle d'information sur un élément d'une page web. N'ayant pas trouvé de plugin fonctionnant sur du contenu généré en ajax, j'ai décidé de le développer moi-même!
Attention, ce plugin requière JQuery 1.4.x minimum. J'utilise en effet la fonction live() permettant de répercuter les événements aux données chargées après le DOM.
N'hésitez pas à me contacter pour toute question, ou suggestion d'amélioration.

Je ne soumets ce plugin à aucune licence, vous pouvez en faire l'utilisation que vous en voulez! Utilisez-le si vous le trouvez utile et faites-moi un retour, ça fait tjrs plaisir ;)

Utilisation :
// exemple :
$(function() {
	
	// Tous les éléments existants ou créés via ajax ayant la classe tip seront impactés
	$(".tip").liveToolTip({options});
	
});

options :
- offsetY 	:	permet de définir à quelle distance se place la div de tooltip, sur l'axe vertical
- cssDiv	: 	permet de définir la classe css de la div tooltip	

Style :
A intégrer dans un css ou dans une balise <style> : 
.tooltip {
	display:none;
	background:transparent url(toolTip.png);
	background-position:0 120px;
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;
}

Image : tooltip.png

Version : 1.0

Version 1.1 :
Correctif sur le positionnement à gauche et à droite de manière à ce que la bulle soit toujours visible quelque soit l'endroit ou est placé le curseur


*/

(function($){
        // définition du plugin jQuery 
        $.fn.liveToolTip = function(opt) {
                // Options du plugin
                var options = $.extend({
					offsetY		: 10,
					cssDiv 		: "tooltip",
					effets		: true
				}, opt);
				
                // On recherche les évènements mouseenter et mouseleave uniquement
				return this.live("mouseenter mouseleave", function(e){
						// Déclaration des variables 
						// Type d'événement mouse capturé : mouseover, mouseleave, mouseout...
						var typeEvt 		= e.type;					
                        var tip 			= $(this);
						
						// On entre sur l'élément? On va afficher la tooltip!
						if (typeEvt == "mouseover") {
							// On supprime la bubule par défaut du navigateur
							if (tip.attr('title').length) {
								// On prend soin d'en enregistrer le titre pour pouvoir le ré-afficher + tard
								this.TooltipContenu 	= tip.attr('title');
								tip.attr('title', "");
							}
							
							var divTip = $("#liveTooltip");
							
							// On va créer une div pour y afficher la tooltip si elle n'existe pas!
							if (divTip.length < 1) {
								var content = '<div id="liveTooltip"><div id="contenuToolTip"></div></div>';

								// On va ajouter la div au BODY de la page
								var liveTooltip = $("body").append(content);
								
								// On enregistre l'objet créé
								divTip = $("#liveTooltip");
							}
							
							// On va supprimer les classes précédentes:
							var classesExistantes = divTip.attr('className');
							divTip.removeClass(classesExistantes);
							
							// On ajoute la classe css passée en paramètre
							divTip.addClass(options.cssDiv);
							
							// Suppression des effets en cours sur d'autres éléments
							divTip.stop(true, true);
							
							// On masque la div
							divTip.hide();
							
							// Hauteur et largeur de la div qui va être créée pour contenir la tooltip
							var hDiv = divTip.outerHeight();
							var lDiv = divTip.outerWidth();
							
							// Calcul de la position de départ de la div 
							var posX = 	(e.pageX - (lDiv / 2) );
							var posY = 	(e.pageY - options.offsetY - hDiv);
							
							// Position css du background
							var cssBackgroundPos 	= "0px 0px";
							// Padding top dans le cas ou on a la bulle en dessous du texte
							var cssPaddingTop		= "0px";
							
							// Gestion du bornage en hauteur
							if (e.pageY - options.offsetY - hDiv < $(window).scrollTop()) {
								// On est un peu trop haut? On va afficher la tooltip sous le texte sélectionné
								posY = ( e.pageY + options.offsetY );
								// Et on change d'image :)
								cssBackgroundPos 	= "0px " + hDiv.toString() + "px";
								cssPaddingTop		= "20px";
							}
							
							// Gestion du bornage en largeur
							if (e.pageX - (lDiv / 2) < 0) {
								// On dépasse sur le côté gauche? on va recaler tout ça
								posX = 0;
							}
							
							if (e.pageX + (lDiv / 2) > $(window).width()) {
								// On dépasse sur le côté droit ? on va recaler tout ça
								posX = $(window).width() - lDiv;
							}													
							
							// Sous-div permettant de bien centrer le texte verticalement en cas de bulle en dessous du texte 
							var divTipContenu = $("#contenuToolTip");
							divTipContenu
								.html(this.TooltipContenu)
								.css("padding-top", cssPaddingTop);
							
							// On affecte les paramètres CSS indispensables
							divTip
								.css("background-position", cssBackgroundPos)
								.css("position", "absolute")
								.css("top", posY + "px")
					            .css("left", posX + "px");
								
							if (options.effets) {
								divTip.slideDown(200);
							}
							else {
								divTip.show();
							}
					            
																
						}
						
						// On sort de la zone? On supprime la tooltip
						if (typeEvt == "mouseout") {
							// Enregitrement de l'objet dans une variable
							var divTip = $("#liveTooltip");							
							// Récupération du title de l'élément
							tip.attr('title', this.TooltipContenu);
							// On efface la div avec un effet fadeOut ou pas (svt option)
								if (options.effets) {
									divTip.slideUp(200);
								}
								else {
									divTip.hide();
								}																	
						}
                });
        // Permettre le chaînage par jQuery
        return this;
        };
})(jQuery)