I'm trying to show a tooltip whenever the person hovers over an image, I've also made the tooltip follow the mouse, and the tooltip will disappear whenever the person leaves the area where the image is located. This works fine and all, but when I move the cursor to the right when the tooltip is following it, it'll start flickering. I know that the cause of this is because the cursor is leaving the image area and entering the tooltip area for a little amount of time. Got no idea how to fix this. Have a look at my code:
HTML:
<img id="mainImage" src="https://i1.wp.com/historiek.net/wp-content/uploads-phistor1/2015/09/Het-nieuw-logo-van-Google-e1441130561430.jpg?fit=663%2C282&ssl=1">
<div id="toolTip">This is the logo of google</div>
JS:
$('#mainImage').hover (
$('#mainImage').on('mousemove', function(e) {
$('#toolTip').css({
'left' : e.pageX,
'top' : e.pageY,
'display' : 'block'
});
}),
$('#mainImage').on('mouseout', function() {
$('#toolTip').css('display', 'none');
})
);
Thanks in advance.
In your CSS for this page, set pointer-events: none on your tooltip:
#toolTip {
pointer-events: none;
}
This will cause click and hover events to be ignored, so the tooltip will no longer steal the hover event from the element underneath it.
Related
I have a unique situation where I'd like to display a spinning loading icon next to the mouse cursor.
This icon will display when a user hovers their mouse over a div. A tooltip will then display after a delay of 1300ms. The spinning icon will display while the tooltip is being delayed, and then hide once the tooltip is displayed.
I have written some code using the jquery-ui .position extension, and have achieved what I need. However, once the tooltip is displayed and the spinning icon disappears, it comes right back when I move the mouse cursor. I'd like the icon to disappear permanently until the mouse is moved outside of the div.
FOR EXAMPLE:
I have created a jsfiddle of this scenario.
Hold your mouse cursor over the Product Info Container. You will see the spinning icon appear, and after 1300ms, the tooltip will display and the spinning icon will disappear. But once you move the mouse again, the icon comes back.
How can I hide the spinning icon for good, once the tooltip is displayed, regardless if I move the mouse or not?
jQuery code I have so far is below.
jQuery( document ).ready( function( $ ) {
var delay = 1300;
var timeout;
$('.product-bottom-info-container').hover(
function(e) {
var that = $(this);
timeout = setTimeout(function() {
that.find('.product-custom-tooltip-container').css({
display: 'inline-block',
position: 'fixed',
zIndex: '5000',
margin: '10px',
whiteSpace: "nowrap"
}).position({
my: "right+10 center",
at: "center",
of: e,
collision: "fit flip"
});
$('.mouse-spinner').hide();
}, delay);
},
function() {
clearTimeout(timeout);
$(this).find('.product-custom-tooltip-container').hide();
$('.mouse-spinner').hide();
}
).mousemove(function(e) {
$('.mouse-spinner').css({
display: 'inline-block',
position: 'fixed',
zIndex: '5000',
}).position({
my: "left+10 top+12",
at: "center",
of: e,
collision: "flip"
});
});
});
Thank you.
You can set a spinner css static part through class of your style-sheet and redefine it when tooltip is become active. Or you can check "timeout" as condition of the code inside mousemove function or you can set additional class also as condition of mousemove function execution. There is a lot of solutions to resolve you case.
I have question about hovering.
$(".hover li img").mouseenter(function() {
$(".overlay").animate({
left: pixels+"px"
});
});
Class overlay is transparent box around image, with red border.
I want when hover on some img, border go there. And it isn't problem for me.
My problem is when hover on first,second, third, forth,fifth, and stop on sixth image. But fast moving over image. My overlay class stops for a moment on every image.
My question is : How to overlay class not stop on every image after moving mouse over it. I appreciate answer, thanks anyway
i suggest you to calculate the left according to the current image's offet left
like for example only
$(".hover li img").mouseenter(function() {
that = this;
$(".overlay").stop(true,false);
$(".overlay").animate({
left: that.offset().left+"px"
});
});
or
$(".hover li img").mouseenter(function() {
$(".overlay").stop(true,false);
$(".overlay").animate({
left: pixels+"px"
});
});
basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.
$(document).ready(function(){
var orig = $(".dropDown").outerHeight(); // 104
var top = $(".dropDown").css("top");
if(top == "0px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "-100px"}, 400,
function(){
var top = $(".dropDown").css("top");
alert(top);
})
})
}
// else{
// $(".selector").on("click", function(e){
// $(".dropDown").animate({top : "0px"}, 400);
// $("body").css({"background-color" : "green"})
// })
// }
if($(".dropDown").css("top") == "-100px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "0px"}, 400);
$("body").css({"background-color" : "green"})
})
}
});
logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.
Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.
while I was setting up the jsfiddle I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.
You can achieve this by laying out your div as it should appear while expanded, and set display:none, but take the clickable tab out as a child element so that it is always visible. Then you can simplify your javascript quite a bit by using slideToggle. The 300 value just specifies how fast you want it to slide.
Example:
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
});
updated jsFiddle
Edit
Maintaining the border at this point is just styling, you can add a container div that holds your Information tab, and just give that a top-border. Here is a further updated jsFiddle.
I have an image sprite which, on mouseenter, changes the background position and moves text over. On mouse leave, the background position and text both move to the left to display the original image. The text is a seperate element which comes from the right to sit over the image once the position has changed.
The mouseenter part works perfectly, with the image and text both scrolling to the left at the same time, but on mouseleave, however in chrome (and what appears to be only chrome), the text will move first, then the image will follow later, the image animation is firing much later than the text.
I've read a few issues with .animate() in chrome, but none of the issues seem to be related to this.
Is there anything obviously wrong with this? Or is there simply a better way of doing it
//animation on mouse enter
$("#featuredImage").mouseenter(function(){
$(this).animate({ backgroundPositionX:"100%" });
$("#featuredText").show("slide", { direction: "right" });
});
//animation on mouse leave
$("#featuredImage").mouseleave(function(){
$(this).animate({ backgroundPositionX:"0%" });
$("#featuredText").hide("slide", { direction: "right" });
});
Try hover see If this helps :
$("#featuredImage").hover(function(){
$(this).animate({ backgroundPositionX:"100%"});
$("#featuredText").show("slide" ,{ direction: "right"});
},function(){
$(this).animate({ backgroundPositionX:"0%" });
$("#featuredText").hide("slide",{ direction: "right" });
}
);
I have a div with an image inside it. When I hover the image, I create a tooltip div thats absolutely positioned over part of the image (the absolute position is important). It contains the title and alt text.
This is all well and good until you hover the tooltip box. It doesn't bubble down and it thinks I'm no longer hovering over the image, thus making the tooltip box disapear. But then it registers I'm hovering the image again and it goes back and forth between showing the tooltip box and hiding it.
Thus the flickering issue.
There are a bunch of posts on SO about the flickering issue and I've tried so many solutions but none have been working. I've tried Mouseover/mouseout, mouseenter/mouseleave, hover, and even using live() in combination with them. I even switched from creating the tooltip from scratch to having the empty div there so it would be in the DOM when the page loaded in case that was the issue. I really don't know what to do anymore. Here is my code at the moment.
$("img").bind("mouseover", function() {
var pimg = $(this);
var position = pimg.position();
var top = position.top;
var left = position.left;
var title = $(this).attr('title');
var alt = $(this).attr('alt');
$('.toolTip').css({'left' : left, 'top' : top, 'width' : width}).append('<div><h3>' + title + '</h3><p>' + alt + '</p></div>');
});
$("img").bind("mouseout", function() {
$('.toolTip').empty();
});
The problem is a) you need to use mouseenter / mouseleave and b) the tooltip div needs to live inside the element that has the mouseenter / mouseleave listeners.
eg:
<div id="mouseoverdiv">
<div class="tooltip">some text</div>
<img src="" />
</div>