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?

Thanks!

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!)

2 Likes

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!

2 Likes

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