Rafrachissement d'une fonction Jquery (tooltip)

**boutmos** · 21/10/2009, 10h37

bonjour,

Comment rafraichir mes tooltips autrement que par :

Code :

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

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 :

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

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 :

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

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

**boutmos** · 21/10/2009, 14h38

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 :

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

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 :

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

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.

**onirisme** · 21/10/2009, 18h02

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 :

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

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

**boutmos** · 22/10/2009, 13h09

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.

**boutmos** · 23/10/2009, 16h15

Je vais reformuler plus simplement

il faudrait lorsque je fais un :

Code :

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

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 :

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

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 :

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

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).

Rafrachissement d'une fonction Jquery (tooltip)

jQuery

Vue hybride

Discussions similaires

Partager

Partager