Problem with Hover/onClick on Mobile and Tablet

Another problem I have is that when the hover window/modal is higher than the div of the panorama image, it only shows me the part inside this panorama’s div.

If is there more content and this hover modal is higher, I can’t set z-index to show it over the website outsite this panorama div so I can’t see all the hover content.

Can you also help me with this issue?

Thanks

Hi @surfeatuvida ,

We have tested your tour from multiple mobile devices on our end and we faced the same issue.

We’re having a better look if we can find a proper solution for it.

Meanwhile, can you give us a screenshot or the code you’ve used for the content, that exceeded the tour height?

Also, for now, you can keep using either (on-click or on-hover) content for better results.

Regards,

• This reply was modified 3 years, 5 months ago by Jahir Chowdhury.

Thanks for your reply.

The main problem is the one exceeding the tour height and not being able to set over it.

The other one, I can use only the on-hover, it’s no problem.

Sure, I can give you the code I used:

HTML:

<div class=”hotspot”>
<div class=”container”>
<div class=”card”>
<div class=”box”>
<div class=”content”>
<h2>CINE</h2>
<h3>Película: Las aventuras de los Minions</h3>
<p>Haz click para ver la película o entra aquí para ver el resto de la cartelera</p>
QUIERO VERLO
</div>
</div>
</div>
</div>

CSS:

/**************************
* HOTSPOTS EN IMAGEN 360
* ************************/
.hotspot {
font-family: “Poppins”;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 10vh;
background: #232427;
}

.hotspot .elementor video {
height:315px;
}

.hotspot .container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 1200px;
margin: 0px 0;
}

.hotspot .container .card {
position: initial;
min-width: 640px;
height: 300px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
inset -5px -5px 15px rgba(255, 255, 255, 0.1),
5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
border-radius: 15px;
margin: 0px;
}

.hotspot .container .card:nth-child(1) .box .content a.hotspot-button {
background: #0CF5FD;
font-weight:600;
}

.hotspot .container .card:nth-child(1) .box .content a {
color: #0CF5FD;
}

.hotspot .container .card:nth-child(1) .box .content a:hover {
color: #0bccd2;
}

.hotspot .container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #2a2b2f;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.hotspot .container .card .box .content {
padding: 20px;
text-align: center;
}

.hotspot .container .card .box .content img {
display: block;
margin: 0 auto;
width: 200px !important;
height: auto;
}

.hotspot .container .card .box .content h2 {
position: absolute;
top: -40px;
right: 30px;
font-size: 8rem;
color: rgba(255, 255, 255, 0.1);
}

.hotspot .container .card .box .content h3 {
font-size: 2.5rem;
color: #fff;
z-index: 1;
margin-bottom: 15px;
}

.hotspot .container .card .box .content p {
font-size: 1rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.9);
z-index: 1;
}

.hotspot .container .card .box .content a.hotspot-button {
position: relative;
display: inline-block;
padding: 8px 20px;
background: black;
border-radius: 5px;
text-decoration: none;
color: white;
margin-top: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.hotspot .container .card .box .content a.hotspot-button:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
background: #0bccd2;
color: #fff;
}

I made another test with an HTML without using styles (only an <h2>) and the same thing keeps happening.

I hope you could find a solution because is a blocking problem for user experience.

Waiting for your reply,

Thanks!

Hi @surfeatuvida ,

Thank you for all the information along with letting us know about this issue.

We just had a discussion with our developers about it.

This issue has the possibility to arise again and it’s a real user experience issue.

To solve it, we’re planning to include a new settings feature.

This feature will let you disable any On-hover content only on mobile devices.

If you enable this setting, Both on-click and on-hover content assigned on a hotspot will work on pc.

However, for the same hotspot, only the on-click content will work on mobile devices.

Hopefully, we’ll be able to release this feature soon.

Let us know if you have any thoughts on this or facing any other issues.

Regards,

This would be great for the first issue I told you, thanks for it.

What about the second issue? (The one I think it’s more important)

The one when the hover window/modal is higher than the div of the panorama image, it only shows the part inside this panorama’s div.

If is there more content and this hover modal is higher, I can’t set z-index to show it over the website outside this panorama div so I can’t see all the hover content.

I’ll wait for your reply,

Thanks

Hi @surfeatuvida ,

Really sorry for the fact that I completely missed the second issue.

Would you mind if we come back to this tomorrow?

You see, our working hours have ended here.

I will discuss about it with our developers, see if we can come to a solution, and can get back to you tomorrow.

Regards,

No worries.

I will wait for your reply tomorrow.

Thanks!

Hello @jahirchowdhury, did you check this second issue with your team as you told me?

I wait for your answer,

Regards,

Hi @surfeatuvida ,

Sorry for getting back late to you.

We had a discussion with our developers about it.

You see, we’re currently giving our users full freedom to modify the content of On-hover and on-click.

So, unfortunately, we’ll not be providing any options for it. We’re really sorry for this.

You can use custom codes to make the content responsive.

Also, if you have any other ideas for the plugin, you can add them here on our roadmap: https://rextheme.com/wpvr-roadmap/

Regards,

Hello,
I understand but the problem is still happening without any custom code.

If the on-hover or on-click div (window) is higher than the 360 image, it gets under the rest of the content so you can’t see it properly.

Is there any way to make this div visible over the viewport content and not cut it from the top of the 360 image?

You can see it here: on-hover Div under content

This div must be over the image and the viewport content and it cuts in the top of the 360 image.

It isn’t custom code, is just an <h2>

I think this is an important issue.

I’ll wait for your reply.
Thanks

Hi @surfeatuvida .

Sorry for getting back to you late.

In this case, you can add this request to the Ideas section of our roadmap here: https://rextheme.com/wpvr-roadmap/

If more of our users are interested in this, we may include it in one of our upcoming releases.

Regards,

Hi @surfeatuvida ,

We have released an update that contains the option to disable displaying On-hover content on mobile devices.

For this, please update the plugin, go to WPVR > Get Started > Settings, and enable the ‘Disable On Hover Content for Mobile’ option.

Let us know if you face any issues with it.

And for your any other feature requests, you can add them in the Ideas section of our roadmap: https://rextheme.com/wpvr-roadmap/

We’ll have a look and see if we can include them in our future updates.

We’re marking this thread as resolved.

You’re welcome to open a new thread here if you face any more issues.

Regards,