Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Tooltips make my Web page not responsive

I am having problems with my tooltips. They exceed the width of the containing div and when the browser is made smaller, the tooltips cause the page to have a wide right margin and the #text div doesn’t expand to reach the right side all the way. When I comment out the tooltips, the problem disappears. How should I style my tooltips so that they don’t cause a large right margin? The codepen is here:


If you make the browser smaller, you will see that the lime green background-color of the body tag takes up half the screen and the #text div doesn’t fill up the viewport width.
 
Because this site uses a doctype of DTD XHTML 1.0 Strict//EN I think your trying to make an old website responsive. Because modern websites are written in HTML5, I suggest you do just that - rewrite the site in modern code. This site has divs on the left and a table to the right - I'd use CSSGrid.

It's easy to see the popup the JS is usied to show the tooltip and it has has fixed width, this is the source of your problem. Easy fix if you want to dig through the coding and you should do that to get things up and running while you redesign the site and bring it into the 21 century.

Here's how to do tooltips: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip
 
Because this site uses a doctype of DTD XHTML 1.0 Strict//EN I think your trying to make an old website responsive. Because modern websites are written in HTML5, I suggest you do just that - rewrite the site in modern code. This site has divs on the left and a table to the right - I'd use CSSGrid.

It's easy to see the popup the JS is usied to show the tooltip and it has has fixed width, this is the source of your problem. Easy fix if you want to dig through the coding and you should do that to get things up and running while you redesign the site and bring it into the 21 century.

Here's how to do tooltips: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip
I just changed it to max-width in percentage and that fixed the problem. I also updated my doctype.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom