Hover box needs fixed

Hello,

On my service page I have columns with features listed on the left and to the right of that feature in the same column I have an icon that activates a popup when the curser is rolled over the icon. I need to fix these two things,

  1. The popup box with the additional description needs to appear above other layers. Currently it appears below some layers. How do I fix that?
  2. The popup box appears above and to the right when rolled over. This works fine accept when the box is near the right side of the screen in which case it cannot be seen. I’d like the popup to continue to appear above the icon being rolled over. If it is to the top left it works for me. How can we do this?

thanks

Hi There,

Thank you for writing in, but I don’t see any popup box on your services page, please provide us the direct link of the page and screenshot of the section where we can see the popup.

Cheers!

Hey,

I might not be using the correct terminology when I say popup box. I’ve made a video that I hope will make sense of what I’m asking. Thank you for your patients.

Hi There,

Thank you for clarification, so you’re using a custom popup. Regarding the popup that is behind the right column. Please add a z-index:0; or z-index:-1; to the right column,

Unfortunately, there is nothing we can do about the popup overflowing outside of the page. As I can see on the popup styling it was given a width of 400px (which is necessary) but the right-area of right-column is less than 400px; (unless the user is viewing it on a wide screen).

I advise that you make the popup show to the left instead.

Cheers!

Cool! How can I make the popup appear to the top left of the ‘!’ icon?

Also, where do adjust the z-index of the right column? (Just in case I need to do it in the future)

Thank you.

Hey @steve,

For the z-index, it needs to be added to your left column in order for it to stack on top of the right column.

For your popup dropdown, add right:0 to your dropdown CSS.

Please note that the dropdown is not part of Pro and comes from custom code. What I’ve given is just a tip. Issues that would arise from the use of custom code and further enhancements would be outside the scope of our support.

Hope that helps.

cool. That worked . Thank you

You’re welcome.

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