In a section of my site, I display information when the user hovers over a link. Then, when the user mouseleaves the link, the display information should leave. Here is the code for this:
function hover_user(id_user){
$("#user"+id_user).mouseleave(function(){
displayinfo();
});
}
How do I add a click functionality so that when the user clicks on the link, the mouseleave is ignored and the information is displayed there until the user decides to mouseover another link?
Thanks!
$("a[id^='user']")
.on("mouseenter", function(){
displayinfo( $(this) ); // show info on mouseover
})
.on("mouseleave", function(){
// code to hide info on mouseout here
})
.on("click", function(){
$(this).off("mouseleave"); // unbind the mouseout onclick
});
We're binding the displayinfo(); function to the mouseenter event of the element. We then bind a function that hides the info to the mouseout event.
The last on() function is bound to the click event of the element, and removes the mouseleave handler. So, after it's been clicked, it will not disappear when the mouse is removed.
Let's use a data attribute to tag the last user that was clicked and then modify the mouseleave listener function to check the user before displaying the info. If I followed you, I think this will do what you described:
function hover_user(id_user){
$("#user"+id_user).click(function(){
// Reset the other users
$('[data-clicked]').attr('data-clicked',false);
// Set this user as clicked
$(this).attr('data-clicked',true);
});
$("#user"+id_user).mouseleave(function(){
if($(this).attr('data-clicked') != 'true'){
displayinfo();
}
});
}
Without seeing the rest of your code I can't be sure, but it would probably be best to assign all your users a common class and instantiate their listeners all at once.
You could add a special class to the link on click, and for the mouseleave event, wrap the disappearance function in a condition that only applies when the class is not present. Finally, prepend the existing functions in your mouseover event handler with removeClass to get rid of the special class in any links that may have it, and run your disappearance function for any of the tooltip elements that are currently visible.
You can do something like below. Keep a current_id variable to keep track of which user is clicked on and check this variable inside mouseleave and if it is the same with current user than don't hide information.
var current_id;
function hover_user(id_user){
$("#user"+id_user).mouseleave(function(){
if(current_id == id_user)
return;
current_id = id_user;
displayinfo();
});
}
function click_user(id_user){
$("#user"+id_user).click(function(){
current_id = id_user;
});
}
.data()to set a boolean on the element onclick which you can always read onmouseleave and act accordingly.