Conflit entre tooltip jquery UI et .attr
hugo_d
Messages postés
116
Statut
Membre
-
SweetRiver Messages postés 93 Date d'inscription Statut Membre Dernière intervention -
SweetRiver Messages postés 93 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Je suis actuellement occupé sur un projet dans lequel j'ai une liste <ul> qui comporte x <li>
Par défaut je n'en affiche que 3 et rends les autres consultables via un lien "See comments".
Ce lien est construit comme suite :
Lorsque l'on clique dessus, il se passe 2 actions :
- J'ajoute/enlève la classe "up" afin de changer l'image de background en css (flèche vers le haut / flèche vers le bas)
- Je modifie l'attribut "title" de mon lien pour que l'infobulle soit correcte (See more / See less)
Tout se passe nickel par contre lorsque je désire utiliser le plugin tooltip de jquery UI pour personnaliser mon infobulle, l'attribut "title" n'est plus mis à jour.
Voici une version html sans l'utilisation du tooltip de jquery UI:
http://jsfiddle.net/Youg/MAa6Z/3/
Avec le tooltip jquery UI (en bas du script):
http://jsfiddle.net/Youg/nzUs8/1/
Quelqu'un a déjà eu le même problème ?
Avez vous une idée pour remédier à ça ?
Merci d'avance
Je suis actuellement occupé sur un projet dans lequel j'ai une liste <ul> qui comporte x <li>
Par défaut je n'en affiche que 3 et rends les autres consultables via un lien "See comments".
Ce lien est construit comme suite :
<a href="#" title="See more comments" id="viewMore">See comments</a>Le texte "See comments" est masqué en css via la propriété "text-indent" et est remplacé par une image de background (une flèche)
Lorsque l'on clique dessus, il se passe 2 actions :
- J'ajoute/enlève la classe "up" afin de changer l'image de background en css (flèche vers le haut / flèche vers le bas)
- Je modifie l'attribut "title" de mon lien pour que l'infobulle soit correcte (See more / See less)
Tout se passe nickel par contre lorsque je désire utiliser le plugin tooltip de jquery UI pour personnaliser mon infobulle, l'attribut "title" n'est plus mis à jour.
Voici une version html sans l'utilisation du tooltip de jquery UI:
http://jsfiddle.net/Youg/MAa6Z/3/
Avec le tooltip jquery UI (en bas du script):
http://jsfiddle.net/Youg/nzUs8/1/
Quelqu'un a déjà eu le même problème ?
Avez vous une idée pour remédier à ça ?
Merci d'avance
1 réponse
-
Bonjour,
Je ne connaissais pas cet UI tooltip et donc la solution que je te donne est peut-être à améliorer, en tout cas, elle a le mérite de fonctionner.
$(document).ready(function(){
var nComment = $('ul.comment li').length;
if(nComment > 3){
$('ul.comment').after('<a href="#" title="See more comments" id="viewMore">See comments</a>');
$('ul.comment li:nth-child(3)').nextAll('li').hide();
}
$('ul.comment li:nth-child(3),ul.comment li:last-child').addClass('last')
$('#viewMore').click(function(){
$(this).toggleClass('up');
$(document).tooltip('destroy').tooltip(); // LIGNE AJOUTEE
if($(this).hasClass('up')){
$(this).attr('title','See Less')
}
else{
$(this).attr('title','See more')
}
$('ul.comment li:nth-child(3)').toggleClass('last').nextAll('li').fadeToggle('slow');
return false;
});
// tooltip
$(function() {
$(document).tooltip();
});
});
@+
