Discussion :

[zevince]

Bonjour,

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

Voici mon HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[danielhagnoul]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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