Popover not always working on hover

Support
#1

Hi
If you hover over the images on top row of images on this page, the popover does not work until halfway down the image,

#2

Hello @wowflak,

Thank you for the details. To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

a.x-extra {
    display: block;
}

Please let us know if this works out for you.

#3

Thanks, now they are below the header

#4

Hi @wowflak,

Please inspect your first section (where the images are placed) and set it z-index to 10000



I see you have that red sticky top bar. Please inspect that as well and set the z-index to 10001, that way that top bar does not appear under the section.

Hope it helps,
Cheers!

#5

thanks that did not work

#6

figured it out. thanks!

#7

Cool, adjust the z-index of the red sticky top bar in your header as well if you don’t want it behind the section when you scroll down.

Thanks,

#8

Thanks, I did that and it is not working.

#9

Hi @wowflak,

Your section’s z-index is 1000000 (a bit overkill :slightly_smiling_face:), so you need your sticky bar to have a z-index higher than the section. 1000001 will do.

More about z-index

Thanks,

#10

Ahh, oops got crazy with the zeros.
Thanks

#11

Glad we could help.

Cheers!

#12

One more thing. I do not want the popover to be at the very top. I found this setting:
element.style {
top: -205.453px;
}

and want it more like:
element.style {
top: -80px;
}

not sure where in the css I put this?

Also how can I make the tooltip popup on mobile scrolling?

Thanks

#13

Hi @wowflak,

Please try with this custom CSS:

.popover.top {
    top: -80px !important;
}

Did you mean the popovers fixed on mobile?

You can try with this custom CSS:

@media (max-width: 767px){
     .popover {
          position: fixed !important;
     }
}

Hope it helps :slight_smile:

#14

Thanks, I did try that before but it makes the popup go crazy and behave strange like it was before I added
a.x-extra {
display: block;
}

any other ideas?

For mobile I mean when you touch the screen I want the popup to show before it activates the link.

Thanks

#15

Hi @wowflak,

Regretfully, that is not possible. You need to remove the link in your image and add the link in text form or button instead. Something like <a href="{yourlink}">Readmore</a>

Thanks

#16

What about moving the popover down a bit? The pervious suggestion did not work proper.

#17

Hi @wowflak,

I see, in that case, please ignore the above CSS and add this

.popover.top {
    margin-top: 1em;
}

Hope it that helps :slight_smile:

#18

Thanks, that sort of helps, but when I add it, it still has an issue where the popover lays on top of the image. If you try and hover over the area that would be covered by the popover it kind of spazzes out and does not work. The other issue is when the popover overlays the image, the image next to it will still be on top of the popover. Note I have taken the code off for now since it is live. Any other ideas? Thanks for your help.

#19

Hello @wowflak,

I have checked your page again and I am getting this:

I am not seeing any issues anymore with the popup. Could you please send us a screenshot of how the hover behaves in your end so that we have an idea of how it looks like when you are viewing it?

Thank you in advance.

#20

Hi, I want the popover to be further down over the image so it does not sit so high as there is quite a bit of content in the box. When I add the:
.popover.top {
margin-top: 4em;
}

I get a similar issue as the original. (note I have taken it off as the site is live) the popover also sits below the image to the right. I have 2 screenshots attached. In the one you can see just a ghost of the popover this is what happens when hovering over the top half of image. In the next it shows the image to the right on top.

Thanks