Tooltip overflow/z-index issue

Hi there,

I have the following fiddle which has some scrolling items and some with tooltips on (the ones that say “Javascript” at the moment, but they will all have a tooltip).

However, the tooltip will not appear on top of everything else and is getting cut off. I’ve tried for so long playing with z-index and overflow, but just can’t work it out. If I add margin to the top of each row, the tooltip appears, but that obviously adds space which I don’t want.

Does anyone have any ideas how I can do this and have the tooltips on top of everything/the other scrolling items?


Try removing this:

.marquee-item {
    overflow: hidden;

(As an aside, I had to disable the scrolling to save my sanity. I wouldn’t recommend doing that on a live site. Don’t force people to chase a button around!)


Thanks for the reply.

That has fixed it! I also had to add

overflow: hidden; to the section.areas-of-expertise

to stop the page from scrolling all the way to the right.

They are not so much buttons, but just to show users what services can be included. I could set it to pause when hovering, or even slow it right down. They are really for information purposes rather than CTA.

Thanks for your help!


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.