• 0

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


Go to solution Solved by Seahorsepip,

Question

PortalPacific

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!

Link to post
Share on other sites

7 answers to this question

Recommended Posts

  • 0
PortalPacific

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

var parentElement = tooltipElement.parentNode;  
                         parentElement.style.overflow = "both";
Link to post
Share on other sites
  • 0
+Zlip792

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.

Link to post
Share on other sites
  • 0
PortalPacific

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. 

Link to post
Share on other sites
  • 0
Seahorsepip

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
Link to post
Share on other sites
  • 0
PortalPacific

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 

Link to post
Share on other sites
  • 0
PortalPacific

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

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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Free eBook: Your First Week With Node.js
      by Steven Parker

      Claim your complimentary copy for free, before the offer expires.



      What's it about?


      A beginner's introduction to Node and its related technologies.

      Used by some of the biggest companies today, Node is blazingly fast. Taking JavaScript, a ubiquitous language among developers, we'll get you up and running with guides on when to use Node, NPM, Security, as well as connecting with MySQL, MongoDB and more.

      How to get it
      Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last!

      >> Your First Week With Node.js - free eBook <<
      Offered by SitePoint, view their other free resources. Limited time offer.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Or via our preferred partner:

      How can I disable these posts? Click here.

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • By News Staff
      Build Your First Node App - free eBook
      by Steven Parker

      Claim your complimentary copy for free, before the offer expires.



      What's it about?


      Bring to life your own Node app.

      A practical walkthrough of building an app server side with JavaScript (Node.js). Starting with Node.js use cases, then defining routes, synchronising the database and finally serving files.

      How to get it
      Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last!

      >> Build Your First Node App - free eBook <<
      Offered by SitePoint, view their other free resources. Limited time offer.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Or via our preferred partner:

      How can I disable these posts? Click here.

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • By News Staff
      Save 73% off the Interactive Learn to Code Bundle - now just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      JavaScript: Best Practice - free eBook download
      by Steven Parker

      Claim your complimentary copy for free, before the offer expires.



      What's it about?


      This book presents modern JavaScript best practice, utilizing the features now available in the language, enabling you to write more powerful code that is clean, performant, maintainable, and resusable.

      Write powerful, clean and maintainable JavaScript with clear, practical lessons in application architecture, package management, tools, shorthands, callbacks, classes, flow control and much more.

      How to get it
      Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last!

      >> JavaScript: Best Practice - free eBook download <<
      Offered by SitePoint, view their other free resources. Limited time offer.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Or via our preferred partner:

      How can I disable these posts? Click here.

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • By News Staff
      Save 98% off this 2020 Ultimate Web Developer & Design Bootcamp Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off this 2020 Ultimate Web Developer & Design Bootcamp Bundle. Kick off your career as an expert web developer & designer with 69+ hours of content on Java, HTML, CSS3, APIs, and more.



      What's the deal?
      This deal consists of the following courses:

      The Complete 2020 HTML5 CSS3 Course with Flexbox, Grid & SASS
      Acquire Fundamental Skills You Need to Become One of the Most Sought-After Web Developers Modern Web Design Complete HTML & CSS
      Learn HTML, CSS, & JavaScript and Create Web Pages from Scratch The Ultimate HTML Developer
      Learn HTML/HTML5 & Put Your Skills Into Practice by Creating an Entire Web Page Build Responsive Real-World Websites with CSS3 v2.0
      Learn CSS3 Flexbox, Animations, Transitions, Transformations & Responsive Design Create an 8-Bit Website
      Create an 8-Bit Style Website from Scratch with Just HTML & Some Basic CSS Understanding APIs & RESTful APIs Crash Course
      An Introduction on How APIs & RESTful APIs Work — No Coding Involved JavaScript for Beginners: Learn with 6 Main Projects
      Everything You Need to Become a Confident JavaScript Developer Git Essentials: The Step-by-Step Guide to Git & GitHub Mastery
      Master the Daily Git Workflow That Every Developer Uses JavaScript Essentials
      The Basis of JavaScript Including Programming Fundamentals You Can Use in Vue.js, React.js & Node.js Python for Everybody: The Ultimate Python 3 Bootcamp
      Learn Python from A to Z & Become a Ninja Python Coder Web Design JavaScript Front-End Code Course
      Explore How to Write JavaScript Code to Create Interactive & Dynamic Web Pages Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This 2020 Ultimate Web Developer & Design Bootcamp Bundle normally costs* $2,200, but you can pick it up for just $39.99 for a limited time - that represents a saving of $2,160.01 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 70% off Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.