Tooltip sur mesure

Bonjour,

J'essaye d'utiliser jquery UI tooltip pour afficher un contenu sur mesure.

Voici mon HTML

Code:

---

1 2 3 4 5

<span class="reference"> <span class="marque" title="test">Adobe</span> <span class="details"><img src="/img/monimage.jpg" alt="alt">Descriptif du travail effectué pour Adobe.. </span> </span>

---

Mon code JS :

Code:

---

1 2 3 4 5 6 7 8 9 10

$(function() { $(".details").hide(); $(".marque").tooltip({ items: $('.details'), content: function() { var element = $( this ); return "tooltip"; } }); });

---

J'ai aussi essayé selon la doc, en plus basique :

Code:

---

1 2 3 4 5 6

$(function() { $(".details").hide(); $(".marque").tooltip({ content: "Tooltip" }); });

---

Bon, quelles que soient les modifs que je fasse sur "items" et "content" ($this).next('.details'), etc.. , le tooltip me montre tout le temps le contenu de l'attribut title au lieu de ce qu'indique la propriété "content" du tooltip..

Comme je ne peux pas mettre une image dans un attribut title.. Il faut que je trouve une solution.. Et la, je ne vois pas trop quel peut être le souci.. ?

la fonction "content" ne semble jamais appelée.. Comment fait-on ca ?

Merci !

Code:

---

1 2 3

<span class="marque" title="Le texte du premier tooltip">Adobe</span> <span class="details"> <img src="/img/monimage.jpg" alt="Le texte de l'attribut alt"> Descriptif du travail effectué pour Adobe.. </span>

---

Code:

---

1 2 3 4 5 6

$( ".marque" ).tooltip();   $( ".details" ).tooltip({ "items" : "img[alt]", "content" : "Un tooltip explicite sur l'image" });

---

Voir : http://api.jqueryui.com/tooltip/#option-items