• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Can you help? JS tool-tip stuck in "hidden overflow" from CSS

Question

PortalPacific    3

Hello fellow Neowinians!! So... I have a caption bar that slides into the thumbnail on hover with 2 links inside. Then, when you hover over each link inside the caption bar it gives you a "tool tip" of type of info inside the links.

Because of the animation for the caption bar I had to use overflow:hidden; which is effecting the tooltip also.

I stripped away most of the site so it would be easier to look at the code.

Here is a link to my problem: portalpacific.co/test/
Hover over the thumb to see.

Also heres it zipped up if you prefer: portalpacific.co/test.rar

I broke the links because they were adding an A to the end for some reason and going to invalid page So please just copy and paste.

 

Anyone got the answer? :3

 

Lots of tytytyty!

Share this post


Link to post
Share on other sites

7 answers to this question

Recommended Posts

  • 0
PortalPacific    3

I found this but not sure how to apply it.. :(
 

var parentElement = tooltipElement.parentNode;  
                         parentElement.style.overflow = "both";

Share this post


Link to post
Share on other sites
  • 0
+Zlip792    482

Adding above mentioned code in "tipr.js" file makes no tooltip on hover... It disable completely. If this is your desired behavior, then simply add this to tipr.js file.

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

Adding above mentioned code in "tipr.js" file makes no tooltip on hover... It disable completely. If this is your desired behavior, then simply add this to tipr.js file.

I guess i misunderstood the original stack overflow post i got that code from. I'm still where i started so if you know the answer that be great. I think we both know that isn't my desired effect. lol

 

There must be a way to override the hidden overflow for the js tooltip. 

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

It's complicated.

To fix this you must put the animated item into a a seperate overflow div from the tooltip. But this prevents you from putting the tooltip in the horizontal center of the tag :/

 

Simply said, if you remove the overflow that clips the popup you also rmeove the overflow that clips the tooltip. 

 

I'll make a hacky fix tommorow.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

It's complicated.

To fix this you must put the animated item into a a seperate overflow div from the tooltip. But this prevents you from putting the tooltip in the horizontal center of the tag :/

 

Simply said, if you remove the overflow that clips the popup you also rmeove the overflow that clips the tooltip. 

 

I'll make a hacky fix tommorow.

Lol! Sometimes i dont come here for a while and when im back needing help BOOM there you are Seahorse! I think im gana play with it a bit more though ill let you know by tonight if i have been successful or not so you dont waste any of that amazing brain power for no reason!

Thanks!! :D 

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

Yeah I didnt have the best of luck last night! Got frustrated again lolz! So you are a go my friend. xD

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.