Popover not always working on hover

Support
#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

#21

#22

Ideally I would prefer each album to open into a modal, but can not figure out how to size the image into the column proper as a toggle for modal…

#23

Hello @wowflak,

Please be advised that popover set to display on top should display right on top of the image. When you add a top margin, off it will come down which will eventually cover the image. This would likely be no longer a popup on top. What I can recommend is to set a minimum width of your popover instead.

You can use this css code:

.popover.top {
    min-width: 550px;
    margin-top: -10px;
}

And you’ll have this:

Hope this would help.

#24

thanks that is a good idea.

#25

You’re welcome!

#26

@wowflak STAX records rocks! Keeping the Rhythm in the R&B… nice

#27

@markomark,

Thanks for updating this thread.
If you need anything else we can help you with, don’t hesitate to open another thread.

Regards.

#28

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