Location: content positioned above the scrollbar in absolute placement

I am encountering the following issue: Within a table, there are multiple cells, some of which contain tooltips.

When the user hovers over a specific cell, the tooltip is supposed to appear. However, the challenge arises with a table that has a horizontal scrollbar at the bottom due to the content exceeding the screen width.

When the tooltip has a position: absolute without a relative parent, it displays above the scrollbar (which is readable) but does not move along with the scrollbar.

On the other hand, if the tooltip has a position: absolute with a relative parent, it moves with the scrollbar but may end up being hidden.

The desired outcome is for the tooltip to follow the scrolling action, display above the scrollbar when hovering over the "Hover me" text, even when the content is scrolled to the right.

Thank you for your assistance!

htmlcss

Answer №1

To solve the issue, simply add margin-bottom to the table

thead > tr > td {
    background-color: grey;
    width: 150px;
    height: 30px;
    }
    
    table{
    table-layout: fixed;
        margin-bottom:70px;
    }
    
    .tooltipWrapper{
    position:relative;
    }
    
    .tooltip{
    position: absolute;
    display: none;
    background-color: green;
    }
    
    .tooltipWrapper:hover .tooltip{
    display:block;
    }
    
    .contentWrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    }
<div class="contentWrapper">
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <thead>
    <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 6</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
    <td>Column 11</td>
    <td>Column 12</td>
    <td>Column 13</td>
    <td>Column 14</td>
    <td>Column 15</td>
    <td>Column 16</td>
    <td>Column 17</td>
    <td>Column 18</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Content 1-1</td>
    <td>Content 1-2</td>
    <td>Content 1-3</td>
    <td>Content 1-4</td>
    <td>Content 1-5</td>
    <td>Content 1-6</td>
    <td>Content 1-7</td>
    <td>Content 1-8</td>
    <td>Content 1-9</td>
    <td>Content 1-10</td>
    <td>Content 1-11</td>
    <td>Content 1-12</td>
    <td>Content 1-13</td>
    <td>Content 1-14</td>
    <td>Content 1-15</td>
    <td>Content 1-16</td>
    <td>Content 1-17</td>
    <td>Content 1-18</td>
    </tr>
    <tr>
    <td>Content 2-1</td>
    <td>Content 2-2</td>
    <td>
    <div class="tooltipWrapper">
    <div>Hover me!</div>
    <div class="tooltip">Cool tips here!<br>Indeed, very cool tips<br>I do enjoy these tips</div>
    </div>
    </td>
    <td>Content 2-4</td>
    <td>Content 2-5</td>
    <td>Content 2-6</td>
    <td>Content 2-7</td>
    <td>Content 2-8</td>
    <td>Content 2-9</td>
    <td>Content 2-10</td>
    <td>Content 2-11</td>
    <td>Content 2-12</td>
    <td>Content 2-13</td>
    <td>Content 2-14</td>
    <td>Content 2-15</td>
    <td>Content 2-16</td>
    <td>Content 2-17</td>
    <td>Content 2-18</td>
    </tr>
    
    </tbody>
    </table>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unrecognized files located within the same directory

My main.html file located in the templates folder also contains three additional files: date.js, daterangepicker.js, and daterangepicker.css. Despite including them in the head of the HTML as shown below: <script type="text/javascript" src="date.js"> ...

javascripthtmlcssanchor

The login form is not being recognized by Chrome

I've been working on creating a login form for my website. Oddly enough, when I try to use it on Chrome, it doesn't prompt me to save my password. Yet, it functions properly on other browsers like Edge, Firefox, and Internet Explorer. Here' ...

phphtmlformsgoogle-chromeauthentication

Create dynamic animations for HTML lists with seamless transitions

I am looking to create a smooth animation effect for an HTML list that moves from left to right and vice versa with a fixed length. The issue I am encountering is that when I click on the right button, it is replacing the list elements instead of animating ...

jqueryhtmlcsshtml-lists

Use Angular and JavaScript to fetch HTML from a mySQL database and dynamically render it on a webpage

I'm currently utilizing Angular for the front end and Node for the back end. The data is retrieved from a MySql database where it's manually stored in text format with HTML tags. For example: <ul> <li>item1</li> <li> ...

javascriptmysqlangularjsjsonhtml

"Customizing the topbar of Twitter Bootstrap for right-to

Attempting to implement twitter bootstrap for a top navigation bar on my master page. http://jsfiddle.net/ZqCah/1/ Encountering some issues and seeking assistance: 1- Desiring to switch the direction of all content to right-to-left (rtl). This would me ...

htmlcsstwitter-bootstrap

Issue with plain CSS animation not functioning in NextJS with Tailwind CSS

I found this amazing animation that I'm trying to implement from this link. After moving some of the animation code to Tailwind for a React Component, I noticed that it works perfectly in Storybook but fails to animate when running in next dev. It si ...

cssnext.jscss-animationstailwind-css

CSS overflow property determines whether to display or hide the parts of an element

Is it possible to create HTML text that will automatically hide itself entirely if it exceeds the container size, instead of clipping with the overflow: hidden property? ...

htmlcss

The margin-left attribute in HTML does not seem to be functioning properly

When I am working on a .php file, I dynamically generate HTML content (like a template) for each result returned from the search input: while ($row = mysqli_fetch_array($result)) { //image echo "<img id=" . '"' . "myImg" . '"' ...

phphtmlcss

Having issues with the Jquery tablesorter plugin when attempting to prevent headers from being sorted

Can anyone help me with a sorting issue I am having with a table on my website? I am using the jQuery plugin tablersorter to sort the table, but I have two headers that I do not want to be sortable. I tried to disable them using the example provided on the ...

javascriptphpjqueryhtmltablesorter

The error message received states: "materialize-css Uncaught TypeError: Vel is not defined as

My current setup involves webpack as the bundler/loader, and I've successfully loaded materialize css (js/css). However, when attempting to use the toast feature, an error is thrown: Uncaught TypeError: Vel is not a function The library is being inc ...

javascriptcssnpmwebpackmaterialize

Adding images sourced from the News API

I have successfully integrated an API from newsapi.org, and it's functioning well. However, the data I receive is only in text format and I would like to include images for each headline. I'm unsure of how to do this since the headlines are dynam ...

jqueryhtmljsonajax

What is the best way to select the element where a user has clicked using JavaScript?

Referencing a previous question on Stack Overflow, the goal is to track user clicks in a Firefox browser using JavaScript. The provided JavaScript code almost achieves this: var DocElements = document.getElementsByTagName('*');for(var i = 0; i & ...

javascripthtmlfirefoxselenium

Ways to Fix the React Hydration Issue in Next.js

I have been encountering an issue with the error message "Hydration failed because the initial UI does not match what was rendered on the server." I am unsure of what is causing this error and would appreciate any insights or suggestions from others who ma ...

javascripthtmlreactjsnext.js

Programme for Server Login

After creating my own server, I attempted to implement a login feature to restrict access to its files. Unfortunately, using Javascript for this task proved to be insecure as usernames and passwords could easily be viewed in the source code: <form name ...

javascripthtmlauthenticationserver

Enhance your view of the iFrame's CONTENT by zooming in

I'm attempting to magnify (without altering the dimensions) an iFrame containing a SWF file. <iframe src="http://ray.eltania.net/TEST/swf-play/swf/testMotion.swf" width="600px" height="500px" frameBorder="0"></iframe> http://jsfiddle.net ...

jqueryhtmlflashzooming

Restoring hover functionality after resetting color using jQuery - tips and tricks

My jQuery code is working well, but I am facing one issue. After clicking on my infocontent menu, the hover effect on h1 is no longer working. How can I bring back the hover function? Here is the HTML: <div class="infocontent"><h1>What?</h ...

jquerycsshoverreset

Move images horizontally next to the height of an element

I am attempting to increase the top attribute in relation to the element it is currently adjacent to. The element should only scroll directly next to the other element and cease when it surpasses the height of that element. My Goal: I want the image to re ...

javascriptjqueryhtmlcss

Issue with scroll animation across multiple div elements

I am working on a project where I have two main divs, one with the id of "left-div" and the other with the id of "right-div". In the "left-div", there are multiple nested divs each with their own unique id. The overflow-y property of the "left-div" is set ...

javascriptjqueryhtmlcss

What is the best way to customize my menu so that the currently selected element stands out with a distinct color?

I'm struggling with customizing the background color of the active page due to complex HTML structure. I'm using responsive twitter bootstrap (2) and facing challenges. To view all tabs at the top, you need to stretch the viewing window. Below is ...

jqueryhtmlcsstwitter-bootstrapmenu

Initiate the printing process by executing the window.print() function. As the document is being

Here's the code snippet : <body> <div class="headerCont noprint"> <div class="headerHold"> <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"> ...

javascripthtmlcssprinting