[Résolu] Jquery Tooltips

Bonjour à tous,

j'ai besoin d'un petit peu d'aide des JQuery-eurs fous : j'essaie d'implémenter des tooltips, j'y arrive sans trop de problèmes avec ceci :

<script type="text/javascript">
<!--
this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};

// starting the script on page load => c'est oké
$(document).ready(function(){
	tooltip();
});
//-->
</script>

#tooltip{
position:absolute;
padding:5px;
width:250px;
display:none;
z-index:45;
border:1px solid #dedede;
background:#fff;
color:#000;
}


<a href="" title="ici le texte sur fond blanc" class="tooltip">Lien tooltip</a><br />

Jusqu'ici tout va bien, c'est même assez simple.

Toutefois, je voudrais arriver à avoir des tooltips stylés différemments sur la même page... comment pourrais-je faire ça de manière élégante ?

ça en gros :

<a href="" title="ici le texte sur fond blanc" class="tooltip">Lien tooltip</a><br />

<a href="" title="ici le texte sur fond rouge" class="tooltip2">Lien tooltip 2</a>

J'ai bien essayé de dupliquer les styles ou les fonctions, mais ça ne marche pas du tout.
J'ai même essayé avec des onmousover, le résultat ne fonctionne pas à tous les coups.

Des idées ?

Merci à ceux qui répondront.

P.S : si y avait même moyen de les faire avec des bords ronds, ça serait parfait.
Modifié par Nico3333fr (17 Aug 2009 - 15:45)

Salut,

Tu peux utiliser la syntaxe suivante :

$("a[class^='tooltip']")

au lieu de

$("a.tooltip")

Il va donc executer le code pour chaque lien ayant la classe commençant par 'tooltip'.
Je pense que la chose vient de là:

$("body").append("<p id='tooltip'>"+ this.t +"</p>");

Je dirais de récupérer le nom de la classe de l'élement sur lequel on passe la souris et de l'appliquer à la place de 'tooltip' avec un truc du genre

$("body").append("<p id='"+$(this).attr("class")+"'>"+ this.t +"</p>");

Je ne connais pas beaucoup Jquery mais je pense que ma logique est bonne ^^

Je vais regarder... mais je ne suis pas un tueur non plus en JQuery, donc je garantis pas que je fasse juste du premier coup.

merci !

En fait, je n'y suis pas arrivé de cette façon, mais en utilisant ce plugin plutôt pas mal fait.

C'est déjà quand la formation JQuery ? (y a du boulot pour moi)