Tooltip et Safari

Version imprimable

Tooltip et Safari

Bonjour,

J'ai actuellement un problème avec l'affichage d'une tooltip sur un select avec safari.
J'utilise le code suivant qui me permet d'afficher la tooltip pendant 1.5sec lors de l'event onChange mais je ne comprend pas pourquoi cela ne fonctionne pas sous safari
Code:

1 2 3 document.getElementById(doc).innerHTML = "<img src='" + value + "' style='float:left; margin: 12px 15px 20px 12px' />"; jQuery(document.getElementById(sel.name)).trigger('mouseover'); setTimeout(function(){jQuery(document.getElementById(sel.name)).trigger('mouseout')},"1500");
Si quelqu'un aurait une idée pour une méthode qui me permettrait de le faire fonctionner sous safari.

Merci par avance

Bonsoir

Entre l'écriture Vanilla JS et jQuery il faut choisir, le mélange des genres est rarement une réussite.

Code:

1
2
3
4
5
6
7
$( "#doc" html( '<img src="' + value + '"  style="float:left; margin: 12px 15px 20px 12px" />' );
 
$( "#sel.name" ).trigger( "mouseenter" );
 
setTimeout( function(){
   $( "#sel.name" ).trigger( "mouseleave" );
}, 1500 );

18/11/2013, 00h14
Evcai

Bonsoir,

Tout d'abord merci pour votre aide.
Je sais qu'il ne faut pas mélanger différentes choses mais comme cela marchait sur tout les navigateurs sauf safari je pensais que ça irait.

Par contre j'ai essayé ce que vous m'avez envoyé ça ne fonctionne sur aucun navigateur.

Merci pour votre réponse
18/11/2013, 09h46
danielhagnoul

Citation:

Envoyé par Evcai

[...] Par contre j'ai essayé ce que vous m'avez envoyé ça ne fonctionne sur aucun navigateur. [...]

:mouarf3:

Je pense que le problème est dans le reste de votre code. Une version de jQuery obsolète ou une autre coquille.

Bonjour,

Merci, pour votre réponse.

Voici le code Javascript complet que j'utilise pour cela.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
jQuery(document).ready(function() {
      jQuery(".select").tooltip({
   position: {
        my: "left+20 center",
        at: "right center"}});
});
 
function display(sel, value){
	var doc = sel.name+'-tooltip';
	var nameImg = document.getElementById(sel.name).value.toLowerCase();
	value = "formu/select/"+sel.name+"/"+nameImg.replace(" ", "-")+".jpg";
	if (document.getElementById(sel.name).options[document.getElementById(sel.name).selectedIndex].className == "none" || value == "none")
		document.getElementById(doc).innerHTML = "";
	else
	{
		document.getElementById(doc).innerHTML = "<img src='" + value + "'  style='float:left; margin: 12px 15px 20px 12px' />";
		jQuery(document.getElementById(sel.name)).trigger('mouseover');
		setTimeout(function(){jQuery(document.getElementById(sel.name)).trigger('mouseout')},"1500");
	}
}

Je pense qu'il doit y avoir des coquilles mais je n'arrive pas à voir ou elles sont.

18/11/2013, 10h24
danielhagnoul

Lorsque je parle du contexte, je pense à la totalité du code de la page web traitée par le navigateur. Je ne peux rien tester sans cela.

Oups désolé voici l'ensemble du code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="script.js"></script>
</head>
<body>
 
<br/><br/><br/><br/><br/><br/><br/><br/>
<select id="type-de-pêche" class="select" onchange="checkValue(this)" name="type-de-pêche">
<option onmouseover="displayOver(this, 'leurre-souples.jpg')" value="Leurre souples">Leurre souples</option>
<option onmouseover="displayOver(this, 'leurre-dures.jpg')" value="Leurre Dures">Leurre Dures</option>
<option class="none" onmouseover="displayOver(this, 'none')" value="Jigging">Jigging</option>
<option class="none" onmouseover="displayOver(this, 'none')" value="Exotique">Exotique</option>
<option class="none" onmouseover="displayOver(this, 'none')" value="Traine">Traine</option>
<option class="none" onmouseover="displayOver(this, 'none')" value="Posé">Posé</option>
<option class="none" onmouseover="displayOver(this, 'none')" value="Autre">Autre</option>
</select>
<div id="type-de-pêche-tooltip" class="tooltip"></div>
<input id="type-de-pêche-hidden" type="text" style="display:none" name="type-de-pêche-hidden">
</body>
</html>

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
jQuery.noConflict();
jQuery(document).ready(function() {
      jQuery(".select").tooltip({
   position: {
        my: "left+20 center",
        at: "right center"}});
});
 
function display(sel, value){
	var doc = sel.name+'-tooltip';
	var nameImg = document.getElementById(sel.name).value.toLowerCase();
	value = nameImg.replace(" ", "-")+".jpg";
	if (document.getElementById(sel.name).options[document.getElementById(sel.name).selectedIndex].className == "none" || value == "none")
		document.getElementById(doc).innerHTML = "";
	else
	{
		document.getElementById(doc).innerHTML = "<img src='" + value + "'  style='float:left; margin: 12px 15px 20px 12px' />";
		jQuery(document.getElementById(sel.name)).trigger('mouseover');
		setTimeout(function(){jQuery(document.getElementById(sel.name)).trigger('mouseout')},"1500");
	}
}
 
function checkValue(sel, value) {
    var value = sel.options[sel.selectedIndex].value;  
	if (value == "Autre")
	{
		var myTextField = document.getElementById(sel.name+"-hidden");
		myTextField.style.display = "inline";
	}
	else
	{
		display(sel, value);
		var myTextField = document.getElementById(sel.name+"-hidden");
		myTextField.style.display = "none";
		myTextField.value = '';
	}
}
 
function displayOver(sel, value){
	var doc = sel.parentNode.name+'-tooltip';
	if (value == "none")
		document.getElementById(doc).innerHTML = "";
	else
		document.getElementById(doc).innerHTML = "<img src='" + value + "'  style='float:left; margin:0 15px 20px 0' />";
}

Merci pour votre patience.
En effectuant un debug avec le debugeur de safari ce matin je me suis rendu que j'image s'affichait bien mais qu'elle ne restait pas afficher 1.5sec comme sur les autres navigateurs.
Elle s'affiche et elle disparait immédiatement je ne sais pas si ça peut vous aider.

22/11/2013, 22h43
danielhagnoul
Bonsoir

"http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" :calim2:

Ce n'est pas du jQuery ou du jQuery UI,.
Votre code tient plus du JS que du jQuery.

Versions actuelles de jQuery et de jQuery UI :
- "http://code.jquery.com/jquery-1.10.2.min.js",
- "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
- "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css"