I have a tooltip that shows on the mouseenter event and hides on the mouseout event. Sometimes, not always, when the mouse moves within the image for the tooltip the tooltip flickers. How can i prevent this happening? Is there a better way to do this?
Here is my code:
$('#home_pic').mouseenter(function() {
$('#home_tip').show();
});
$('#home_pic').mouseout(function() {
$('#home_tip').hide();
});
Use mouseleave instead of mouseout()
$('#home_pic').mouseleave(function() {
$('#home_tip').hide();
});
Or use .hover
$('#home_pic').hover(function() {
$('#home_tip').hide();
},function() {
$('#home_tip').show();
});
You can use the toggle() function for this, it accepts a boolean to set the state, so something like:
$('#home_pic').on('mouseenter mouseleave', function(e) {
$('#home_tip').toggle(e.type==='mouseenter');
});
FIDDLE
Try mouseleave instead of mouseout like this:
http://jsfiddle.net/tncbbthositg/dWKfX/
You need to write your mouseenter and mouseleave functions in a proper way, something like below:
$('#home_pic').mouseenter(function() {
$("#home_pic").show();
},mouseleave(function() {
$("#home_pic").hide();
}));
Note: Code Not tested to work.
you can also try something like this if the tooltip runs over the home pic - I've used very similar code to pop up bubbles on a image map
$('#research_area').mouseover(function() {
$('img#research').css('display', 'block');
runthis();
});
function runthis () {
if ( $('img#research').css('display') == 'block') {
$('img#research').mouseleave(function() {
$(this).css('display', 'none');
});
}
http://www.karpresources.com/
Related
I know this might be silly but I would like to know if there is a way to realize.
Basically, I would like the dropdown-content element to 'KEEP DISPLAYING' even after 3 secs of mouse moving-out of the parental 'dropbtn' button or element.
E.g. code:
$(function() {
$('#dropbtn').hover(function() {
$('.dropdown-content').css('display', 'block');
}, function() {
// on mouseout:
setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
$('.dropdown-content').hover(function(){
$('.dropdown-content').css('display', 'block');
},function(){
$('.dropdown-content').css('display', 'none');
})
});
Current issue is that setTimeout() function is overriding my desired way on this particular line of JS code:
$('.dropdown-content').css('display', 'block');
In another word, I want setTimeout() to be effective if and only if I set not my mouse cursor on 'dropdown-content' div.
Hope someone can help out :)
Instead of using hover, you could use mouseenter/mouseleave to 'toggle' the .dropdown-content, except the delay of 3s on mouseleave:
$(function() {
var dropdownTimeout = null;
$('#dropbtn').mouseenter(function() {
if(dropdownTimeout) {
clearTimeout(dropdownTimeout);
dropdownTimeout = null;
}
$('.dropdown-content').css('display', 'block');
});
$('#dropbtn').mouseleave(function() {
dropdownTimeout = setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
});
I've been looking around the documentation to try find a way to easily activate the select menu on hover, and not only on click.
Unfortunately, I cannot seem to find the way to do it (if it exists), and was hoping someone could point me in the right direction?
Here is a plnk,
http://plnkr.co/edit/GTeyWfOp9aTd1B0Be0Hs?p=preview
Thanks all
Try this:
$("#myselect").next(".select2").mouseenter(function() {
$("#myselect").select2("open");
});
$(document).on("mouseleave", ".select2-container", function(e) {
if ($(e.toElement || e.relatedTarget).closest(".select2-container").length == 0) {
$("#myselect").select2("close");
}
});
My generic solution to open and close select2 on mouseenter and mouseleave
$(document).on('mouseenter', '.select2-container', function(e) {
$(this).prev("select").select2("open");
});
$(document).on('mouseleave', '.select2-container .select2-dropdown', function(e) {
var selectId = $(this).find("ul").attr('id').replace("select2-", "").replace("-results", "");
$("#"+selectId).select2("close");
});
I have tried sooooo many different methods of this that others have suggested, but I don't understand what i'm doing wrong and really need some help. I have tried using various combinations of hover, mouseenter/mouseleave, on/off, bind/unbind.
Basically, I can get things to unbind, but I can't get them to bind again afterwards.
I put together a jsfiddle with a basic example. If you click the "Hover Off" button, mouseenter is disabled like intended. But then if you click the "Hover On" button after, mouseenter does not enable again.
http://jsfiddle.net/770b5p8q/3/
Here is "hover" functionality:
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
Here is what should enable/disable it:
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter");
$(this).bind("mouseleave");
});
});
$('.hover_disabled').click(function(){
$('.square').each(function(){
$(this).unbind("mouseenter");
$(this).unbind("mouseleave");
});
});
You should pass the function for binding and unbinding the handlers, something like:
var mouseEnterHandler = function () {
$(this).addClass('active');
}
var mouseLeaveHandler = function () {
$(this).removeClass('active');
};
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
$('.hover_enabled').click(function () {
$(this).addClass('active');
$('.hover_disabled').removeClass('active');
// I need to bind hover here
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
});
But the code becomes ugly and unmaintainable. You can use event delegation instead:
$(document).on('mouseenter mouseleave', '.square.hoverable', function(event) {
// toggle the class by checking the type of the event
$(this).toggleClass('active', event.type === 'mouseenter');
});
// caching the state changers
var $e = $('.hover_enabled, .hover_disabled').click(function () {
var $this = $(this).addClass('active'),
isHoverable = $this.hasClass('hover_enabled');
// exclude the clicked element from the set and remove the class
$e.not($this).removeClass('active');
$('.square').toggleClass('hoverable', isHoverable);
});
The above mouseenter mouseleave handler is only executed when the .square element has hoverable className. You can also remove the event handler and use CSS for styling.
.square.hoverable:hover {
}
http://jsfiddle.net/bztec1f4/
Once you rebind it back you need to pass function as well.
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
});
I need hide tooltip on mouseout of link, BUT not if mouseover on tooltip (both have different parents)
For example: we can see it on Facebook when hover on names or avatars friends
I try this but every time i get FALSE
$('a').bind('mouseleave', function () {
var i = $('div.tooltip').is('hover');
if(i===true){
console.log('cursor over the tooltip, so dont hide');
}
else{
console.log('hide tooltip');
}
});
How i can check both condition?
Put both the link and the tool tip in the same parent:
<div id="parent">
link
<div id="tooltip">tooltip</div>
</div>
And then in the script you can just put the mouseleave function on the parent:
$("#parent a").mouseenter(function(){
$("#tooltip").css("display","block"); //or however you handle this
});
$("#parent").mouseleave(function(){
$("#tooltip").css("display","none");
});
If you can't change your markup, use a timed event and abort it when the mouse enter either element, like so:
var timer;
$("a, .tooltip").mouseleave(function() {
timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
clearTimeout(timer);
});
function doSomething() {
console.log('hide tooltip');
}
Here's a FIDDLE
$('img.clientImage').live('hover', function () {
if ($('div#ClientImageHover').length > 0) {
$('div#ClientImageHover').remove();
} else {
$('<div id="ClientImageHover">Change Image</div>').insertAfter($(this));
$('div#ClientImageHover').css({ 'top': $(this).position().top });
}
})
Now what happens if I hover over #ClientImageHover. You guessed it, it will start flickering quickly on and off. Because there's a mouseout event on .clientImage.
I need to create the element here and append it after the img then position it on top of it. This is working correctly, but I am having issues when hovering over #ClientImageHover. How can I keep showing this div normally when the mouse is over it and keep everything as it currently is?
Thanks.
To expand on my comment, do something like this jsFiddle
HTML:
<div class="container">
<img class="clientImage"></div>
</div>
JS
$('.container').live('hover', function () {
if ($('div#ClientImageHover').length > 0) {
$('div#ClientImageHover').remove();
} else {
$('<div id="ClientImageHover">Change Image</div>').appendTo($(this));
$('div#ClientImageHover').css({ 'top': $(this).position().top });
}
});
You could break it up to use .mouseenter() and.mouseleave(). Use .mouseenter() on img.clientImage and then only remove it on $('div#ClientImageHover').mouseleave();
http://jsfiddle.net/gkkxG/