11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Neutraliser un mouseLeave déclenché par un mouseOver sur un t

Bonjour à tous,

La <div role="tooltip">d'un tooltip jquery semble être prévu pour être uniquement ajouté au <body> du document.

Lorsque l'élément déclencheur du tooltip est situé dans un élément autre que le body, le passage du pointeur sur la div du tooltip entraîne alors un mouseOut (et un mouseLeave) sur cet élément.

http://jsfiddle.net/olithom/U5QVp/7/

Existe-t-il une méthode propre connue pour neutraliser facilement cet événement ?

Merci pour vos idées.

Code

<!DOCTYPE html>
<html>
<head>
  <style type='text/css'>
    .content{
    position:relative; 
    background-color:#cccccc;
    width:300px; 
    height:300px
}
.sensor{
    position:absolute;
     background-color:#ffcccc;
    top:20%; right:20%; bottom:20%; left:20%;
    display:none;
}
.target{
    position:absolute;
     background-color:#ccffcc;
    top:20%; left:20%; 
}
  </style>
</head>
<body>
  <div id="content" class="content">
    <div id="sensor" class="sensor">
        <div id="target" class="target" title="target">target</div>
    </div>
</div>    
<script type='text/javascript'>//<![CDATA[ 
$("#content").hover(
    function(){$("#sensor").fadeIn();},
    function(){$("#sensor").stop().fadeOut();}
);
$("#target").tooltip({ position: { my: "left+10 top-4"}});
//]]>  
</script>
</body>
</html>

Modifié par olithom17 (31 May 2013 - 15:12)
salut,
je ne pense pas avoir tout compris mais je crois que c'est un problème assez récurrent. Si tu utilises JQuery, préfère les évènements mouseenter et mouseleave.
Bonjour Zelalsan et merci d'avoir regardé ça.

A priori, avec hover() j'utilise bien mouseenter et mouseleave.

.hover( handlerIn(eventObject), handlerOut(eventObject) )
The .hover() method binds handlers for both mouseenter and mouseleave events.


Le problème vient bien du fait que les tooltips déclenchent le mouseOut ou le mouseLeave.
J'ai modifié le titre pour éviter la confusion.

Merci
Modifié par olithom17 (29 May 2013 - 16:52)
Bonjour,

Si quelqu'un rencontre ce problème, j'ai résolu ça en utilisant :

		if($(ev.relatedTarget).attr("role") === "tooltip"){
			return;
		}

dans la fonction du mouseleave.


$("#content").hover(
	function(){$("#sensor").fadeIn();},
	function(ev){
		if($(ev.relatedTarget).attr("role") === "tooltip"){
			return;
		}
		$("#sensor").stop().fadeOut();
	}
);


J’espère que c'est pas trop "bidouille" mais j'ai tenté pas mal de trucs et j'ai pas trouvé mieux...
Modifié par olithom17 (05 Jun 2013 - 15:52)
Sujet clos
Aller à