Rafrachissement d'une fonction Jquery (tooltip)

Version imprimable

bonjour,

Comment rafraichir mes tooltips autrement que par :

Code:

1
2
3
4
5
6
 
$(document).ready(function(){
	checkNavigationDisplay();
	setNavigationDisplay();
 	tooltip();	//active les tooltips */
});

En gros j'ai un bouton qui me permet de passer d'un mode icone a un mode liste. J'ai donc besoin de rafraichir sa tooltip car je fais un replaceWith.

si dans celle ci j'incorpore un tooltip(); la tooltip de mon bouton est bien rafrachie mais je perds les titles de mes autre liens au 2eme passage sur un de ces items.

Code HTML :

Code:

1
2
3
4
5
6
 
<div class="rubriqueOptions">
	<a class="tooltip displayStyle" title="Passer en mode Liste" onclick="switchStyle();">
		<div class="listDisplay"><span>Mode liste</span></div>
	</a>
</div>

code JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function switchStyle() {
	switchNavigationDisplay();
 
	$("#tooltip").fadeOut("slow",function(){
	   $("#tooltip").remove();
	});
 
	$("#contenuPanel").slideUp("slow",function(){
		// Mets le tooltip a jour et switch de classes CSS pour changer l'affichage du style
		if (currentNavDisp == 0){
			$(".rubriqueOptions .displayStyle").replaceWith("<a class='tooltip displayStyle' title='Passer en mode ic&ocirc;nes'><div class='iconsDisplay'><span>Mode ic&ocirc;nes</span></div></a>");
			$('div.itemConteneur').toggleClass('itemConteneurDetail');					// Ajoute une nouvelle classe aux elements de type .div.itemConteneur
			$('div.itemConteneurDetail').removeClass('itemConteneur');
		} else {
			$(".rubriqueOptions .displayStyle").replaceWith("<a class='tooltip displayStyle' title='Passer en mode liste'><div class='listDisplay'><span>Mode liste</span></div></a>");
			$('div.itemConteneurDetail').toggleClass('itemConteneur');
			$('div.itemConteneur').removeClass('itemConteneurDetail');			
		}
 
/* tooltip();*/
 
		$(".rubriqueOptions .displayStyle").mousedown(function() { switchStyle(); });	// Rajout de l'evenement pour le bouton
		$("#contenuPanel").slideDown("fast");											// On deroule la div pour montrer le changement
	});	
}

J'ai compris pourquoi çà bug mais je n'arrive pas a rectifier le déroulement de ma logique tooltip.

En gros , si j'effectue ma fonction switchStyle(); (avec l'appel de tooltip(); pour l'actualiser), il se passe que j'ai fait a nouveau appel a ma fonction tooltip :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function tooltipHover() { $("a.tooltip").hover(function(e){ this.widthBody = $("body").width(); this.coordX = e.pageX; this.t = this.title; this.title = ""; $("body").append("<div id='tooltip'> This.title : "+ this.title +"<div> this.t : "+ this.t +"</div><div class='barre'></div><div> widthBody : "+ this.widthBody +"</div><div> Abscisse : "+ this.coordX +"</div></div>"); $("#tooltip") .css("top",(e.pageY - yOffset) + "px") .css("left",(e.pageX + xOffset) + "px") .fadeIn("normal"); },function(){ alert("done"); this.title = this.t; // Reaffecte le titre au document $("#tooltip").remove(); }); }
et comme il n'y a pas eu de perte de focus sur la tooltip, celle ci n'a pas executé le code :
Code:

1 2 3 4 5 ,function(){ alert("done"); this.title = this.t; // Reaffecte le titre au document $("#tooltip").remove(); }
et donc çà crée un .... smilblik dans le switch des titles pour les infobulles suivantes.

Bonsoir,

Si j'ai bien compris :? tu veux changer ton style de menu et tes tooltypes dynamiquement et même si il n'y a pas de perte de focus???

Sans perte de focus, tu vas être obligé de simuler un tooltype...

Regarde le code ci-dessous ainsi que le resultat et dis moi si c'est ce que tu veux :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Page de test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery/jquery.js"></script>
        <script type="text/javascript" src="jquery/jquery-ui.js"></script>
        <link href="jquery/jquery-ui.css" type="text/css" rel="stylesheet"/>
    </head>
    <script>
        $(document).ready(function(){
            /** Change le style du menu **/
            $("#switchMenuStyle").click(function(){
                if ($('#nav').hasClass('icone')) {
                    $('#nav').animate({
                        opacity: 0
                    }, 800, function(){
                        $(this).removeClass('icone').addClass('list').animate({
                            opacity: 1
                        }, 800);
                        $('#menuType').html('Icone');
                        $('.tooltype').html('Basculer en mode Icone...');
                    });
                }
                else {
 
                    $('#nav').animate({
                        opacity: 0
                    }, 800, function(){
                        $(this).removeClass('list').addClass('icone').animate({
                            opacity: 1
                        }, 800);
                        $('#menuType').html('Liste');
                        $('.tooltype').html('Basculer en mode Liste...');
                    })
                }
            });
            /** Change le tooltype **/
            $("#switchMenuStyle").hover(function(){
                if ($('#nav').hasClass('icone')) {
                    $(this).attr('title', 'Basculer en mode Liste...');
                }
                else {
                    $(this).attr('title', 'Basculer en mode Icone...');
 
                };
                $('.tooltype').show();
            }, function(){
                $('.tooltype').hide();
            });
 
            /** Création du tooltype **/
            $("#switchMenuStyle").mousemove(function(e){
                $('.tooltype').css('top', e.pageY + 20);
                $('.tooltype').css('left', e.pageX + 20);
            });
        });
    </script>
    <style>
        /** Type icones **/
        ul.icone {
            margin: 0;
            padding: 0;
            list-style: none;
        }
 
        ul.icone li {
            float: left;
        }
 
        ul.icone li a {
            display: block;
            padding: 0.4em 0.8em;
            border: 1px solid #000;
        }
 
        /** Type liste **/
        ul.list {
        }
 
        ul.list li {
            list-style: circle;
        }
 
        /** Format tooltype **/ .tooltype {
            float: left;
            position: absolute;
            padding: 0.3em;
            border: 1px solid #000;
            background-color: #c0c0c0;
        }
 
    </style>
    <div id="conteneur">
    <a id="switchMenuStyle" href="#" title="Basculer en mode Liste...">
        Changer de style =><span id="menuType">Liste</span>
    </a>
    <span class="tooltype" style="display:none"/>Basculer en mode Liste...</span>
    <br/>
    <br/>
    <ul id="nav" class="icone">
        <li>
            <a class="home" href="#" title="">
                Accueil
            </a>
        </li>
        <li>
            <a class="services" href="#" title="">
                Services
            </a>
        </li>
        <li>
            <a class="contact" href="#" title="">
                Contact
            </a>
        </li>
    </ul>
</div>
</html>

Lien démo

22/10/2009, 13h09
boutmos

Salut , merci de ta réponse.

Je n'ai pas essayé ton code mais j'ai regardé ta démo. La difference c'est que j'ai aussi des tooltip sur les liens qui figurent dans les <LI> qui sont généré donc au chargement de la page.

De mon coté, La tooltip du bouton marche correctement, mon bug se produit sur la tooltip des liens qui encapsulent les <LI>. La premiere fois ma tooltip m'affiche bien le title et au second passage, ce title est perdu. J'ai vérifié avec DomInspector.

Le seul moyen que j'ai trouvé pour que çà fonctionne c'est d'avoir une deuxieme class de tooltip pour le bouton et la c'est ok puisque je ne raffraichi que cette 2eme classe. Par contre j'ai donc une duplication de code... :/ ce qui ne me satisfait pas.

Je vais reformuler plus simplement :)

il faudrait lorsque je fais un :

Code:

1
2
 
$(".rubriqueOptions .displayStyle").replaceWith("<a class='tooltip displayStyle' title='Passer en mode ic&ocirc;nes'><div class='iconsDisplay'><span>Mode ic&ocirc;nes</span></div></a>");

Rafraichir mon évènement tooltip qui est créer par :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
this.tooltip = function(){
	xOffset = 10;
	yOffset = -20;
 
	$("a.tooltip").hover(function(e){
 
		this.widthBody = $("body").width();
		this.coordX = e.pageX;
 
		this.t = this.title;
		this.title = "";
 
		$("body").append("<div id='tooltip'>"+ this.t +"<div class='barre'></div><div> widthBody : "+ this.widthBody +"</div><div> Abscisse : "+ this.coordX +"</div></div>");
 
		$("#tooltip")
			.css("top",(e.pageY - yOffset) + "px")
			.css("left",(e.pageX + xOffset) + "px")
			.fadeIn("normal");
 
	    },function(){
			this.title = this.t;	// Reaffecte le titre au document	
			$("#tooltip").remove();
    	});
 
	$("a.tooltip").mousemove(function(e){
 
		if (this.widthBody-e.pageX > 200) {
			$("#tooltip")
				.css("top",(e.pageY - yOffset) + "px")
				.css("left",(e.pageX + xOffset) + "px")
				.css("width", 150 + "px")
		} else {	
			$("#tooltip")
				.css("top",(e.pageY - yOffset) + "px")
				.css("left",(e.pageX -180 + xOffset) + "px")
				.css("width", 150 + "px");
		}
	});
}

et activer par :

Code:

1
2
3
4
5
 
$(document).ready(function(){
...
 	tooltip();	//active les tooltips */
});

est il possible de rafraichir cet élément autrement qu'en faisant : tooltip(); dans ma fonction ? (ce qui fait planter les anciennes tooltips).