11548 sujets

JavaScript, DOM et API Web HTML5

[JQUERY] Tooltip

Salut à tous,

j'essaie de faire un tooltip via EasyTooltip, et j'ai un petit problème :

Le code des liens est le suivant :

<a href="" class="infotip"><span class="contenutooltip">(contenu pas affiché mais utilisé pour le tooltip)</span> ici le lien</a>


$(document).ready(function(){
	$("a.infotip").easyTooltip({
		tooltipId: "tooltip",
                content : 
// là je voudrais lui dire d'afficher le span de classe "contenutooltip" du lien en question via un $(this). qqch 
	});
});


J'arrive bien à afficher le contenu d'un id via un 
content: document.getElementById('contenutooltip2').innerHTML


mais je voudrais afficher le contenu du span compris dans le lien en question via un $(this)

Est-ce que vous avez des pistes, je sèche... Smiley sweatdrop
Modifié par Nico3333fr (14 May 2010 - 11:32)
Normalement tu n'as qu'à ajouter l'id d'un élément (que tu as caché par css) après 'item'.

$(document).ready(function(){	
	$("a.infotip").easyTooltip({
		useElement: "idContenuTooltip"	
	});
});

L'élément concerné peut d'ailleurs être n'importe où sur la page, pas forcément juste après le lien à survoler.
Le problème, c'est que mon élément a une classe, et pas un id.

EDIT : réexpliquons : j'ai des liens tous construits sur la même forme :
<a href="" class="infotip"><span class="contenutooltip">(contenu pas affiché mais utilisé pour le tooltip)</span> ici le lien 1</a>

<a href="" class="infotip"><span class="contenutooltip">(autre contenu pas affiché mais utilisé pour le tooltip)</span> ici l'autre lien 2</a>

etc.


je peux y accéder via un 

content: document.getElementsByClassName('contenutooltip').innerHTML


mais ça ne convient pas, il faut qu'il accède à la classe du lien.

Ce que je voudrais, c'est accéder au .contenutooltip du lien que la fonction a activé.
Si je survole le "ici le lien 1" que ça affiche "(contenu pas affiché mais utilisé pour le tooltip)", si je survole "ici l'autre lien 2" que ça affiche "(autre contenu pas affiché mais utilisé pour le tooltip)", etc.

D'où mon envie d'utiliser $(this) dans la fonction... mais je ne trouve pas la bonne syntaxe.


Est-ce que c'est plus clair ?
Modifié par Nico3333fr (14 May 2010 - 16:37)
Plusieurs solutions:
-Placer un ID à la place d'une class.
-Changer de plugin
-Ecrire une fonction jquery (5 lignes)

-Modifier la ligne 36 du plugin en supprimant le "#"+

Puis initialiser le plugin: useElement: "balise.taClasse"

-Ou encore modifier la ligne 35 avec un $(this).next().html() si ton contenu est toujours placé juste après ton lien.
Ou alors peut être que comme ça tu t'en sort.


$(document).ready(function(){ 
    $("a.infotip").each(function(){
        var $this = $(this);
        $this.easyTooltip({ 
            content :  $this.find('contenutooltip').html()
        }); 
    });
});
Sujet clos
Aller à