CODEWITHSUNDEEP
jqueryhtmlcss
Nolan Zandi
Nolan Zandi

Reputation: 111

On hover/mouseover text does not move with in-page scroll bar

I'm using some on hover content to give additional data to an abbreviated header as such:

On hover normally

However, when I use the scrollbar the text moves across the page as such:

When I use the scrollbar

This is a regular table with HTML, CSS, Javascript:

<th style="text-align:center;">
<div>
NYITKG3
</div>
<div class="popup" >
Joyride Green Tea RTD Keg
</div>
</th>

$(".cell").mouseover(function() {
$(this).children(".popup").show();
}).mouseout(function() {
$(this).children(".popup").hide();
});

.popup {
    display:none;
    position:absolute;
    border:1px solid #000;
    width:100px;
    color: black;
    background: white;
    }

Upvotes: 0

Views: 1156

Answers (2)

Mihai T
Mihai T

Reputation: 17697

see here :

jsfiddle

you need to set a relative position to an element so the absolute popup stays relative to that element and why use JQ when you can use css ?

.cell { 
  position:relative;
 }
 .cell:hover .popup { 
 display:block
 }

Upvotes: 1

Nolan Zandi
Nolan Zandi

Reputation: 111

So it turns out the answer is fairly simple. If you want your absolutely positioned element to stay within its parent as you use an in-page scroll bar, you just need to add position:relative; into the css of the parent div as such:

<th style="text-align:center;position:relative;">
<div>
NYITKG3
</div>
<div class="popup" >
Joyride Green Tea RTD Keg
</div>
</th>

Now the hover text will scroll with the table.

Upvotes: 0

Related Questions