Conflit entre tooltip jquery UI et .attr

Fermé

hugo_d Messages postés 87 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 21 décembre 2013 - 21 déc. 2013 à 17:02
SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 - 22 déc. 2013 à 13:26

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 :

<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

A voir également:

Conflit entre tooltip jquery UI et .attr
Tweak ui windows 10 - Télécharger - Personnalisation
One ui 4 - Guide
Zh ui vmall - Forum Huawei
Ecran d'accueil one ui s'arrête systématiquement - Forum Samsung
Conflit adresse ip ✓ - Forum Réseau

1 réponse

Réponse 1 / 1

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
21 déc. 2013 à 23:43

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();
	    });
		
	});

hugo_d Messages postés 87 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 21 décembre 2013
21 déc. 2013 à 23:58

Parfait ça fonctionne correctement ;-)

Si je comprends bien ta ligne de code force la fonction tooltip a être re-chargée lors de chaque clics ?

En tout cas merci pour ton aide

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
22 déc. 2013 à 13:26

Salut,

Oui, c'est un des moyens pour que cela fonctionne. Un expert du UI tooltip te donnera peut-être une autre solution.

Bonnes fêtes !

Discussions similaires

le package est en conflit avec un autre package ayant le même nom

Message d'erreur : ce paramètre source rentre en conflit...

Conflit d'adresse IP

c'est quoi l'icone systray

c'est quoi debug et comment corriger l'erreur

Discussions similaires

Newsletters