jQuery Tooltip

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

jQuery Tooltip

Post by Pazuzu156 »

I have a tooltip for an image on my page, and when they mouseover the image it fades in and fade out on mouseout.

My issue is when they mouseover the tooltip itself, it fades in and out constantly. How do i fix this?

Code: Select all

$(function() {
    $("#imgtooltip").hide();
    $("#imgtooltip").appendTo("#person");
    $("#ppic").mouseover(function() {
        $("#imgtooltip").fadeIn('fast');
    });
    $("#ppic").mouseout(function() {
        $("#imgtooltip").fadeOut('fast');
    });
});
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
Esteban11
Forum Newbie
Posts: 3
Joined: Thu Nov 10, 2011 4:46 am

Re: jQuery Tooltip

Post by Esteban11 »

If you are seeing this in Firefox - then the 'zoom' trick isn't going to help...

Since you have Firefox available, I'd suggest using Firebug and poking around with the CSS attributes. Switch them on and off to see what makes a diference and alter then on the page. zIndex is the obvious one to look at - but I don't think the demo css sets that for DataTables...
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: jQuery Tooltip

Post by Pazuzu156 »

Esteban11 wrote:If you are seeing this in Firefox - then the 'zoom' trick isn't going to help...

Since you have Firefox available, I'd suggest using Firebug and poking around with the CSS attributes. Switch them on and off to see what makes a diference and alter then on the page. zIndex is the obvious one to look at - but I don't think the demo css sets that for DataTables...
That's not my issue. It works properly, comes and goes as told to. It's just when i decide to mouseover the tooltip, it wants to fade out. Then the mouse touches the images again, then it repeats itself.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: jQuery Tooltip

Post by pickle »

I may be able to give a better answer if I see how it works, but from what I understand, something like the hoverIntent plugin might help. Additionally, you could put a delay on your fadeOut of sorts, so it will only start to fade out after 1000ms.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: jQuery Tooltip

Post by califdon »

If you tell it to fade out imgtooltip when you mouseout of ppic, then that's what it's going to do, so it depends on where imgtooltip is compared to ppic. Do they overlap? When your cursor is over imgtooltip, is it beyond ppic? If imgtooltip is within the boundaries of ppic, then the browser probably considers that your cursor has "moused out" of ppic when it goes over imgtooltip, since I don't think the mouse cursor can ever be "in" more than one element at a time. Perhaps in the mouseout function you could test whether the cursor is over the imgtooltip and only execute the fadeOut if it is not.
Gopesh
Forum Contributor
Posts: 143
Joined: Fri Dec 24, 2010 12:48 am
Location: India

Re: jQuery Tooltip

Post by Gopesh »

Hi,demonstrate it using http://jsfiddle.net/.then others can see the working example and work around for solutions.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: jQuery Tooltip

Post by Pazuzu156 »

Gopesh wrote:Hi,demonstrate it using http://jsfiddle.net/.then others can see the working example and work around for solutions.
http://jsfiddle.net/Pazuzu156/XZhJF/
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
Gopesh
Forum Contributor
Posts: 143
Joined: Fri Dec 24, 2010 12:48 am
Location: India

Re: jQuery Tooltip

Post by Gopesh »

Hi, check this link http://jsfiddle.net/XZhJF/2/.Hope that it works
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: jQuery Tooltip

Post by Pazuzu156 »

Perfect. Thank you.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
Post Reply