-
Posts
-
Hi,
Is it possible to have the image hotspot module displaying the same way as the desktop on mobile devices?
Instead of having a set of numbers with the text below the image, it would be nice to tap the image hotspots and show the boxes as it normally does on desktops.Thank you.
In addition to the above,
We have the following text next to our image hotspot which is a map:
“Please rollover a city for more details”.This doesn’t make sense on mobile because there is no “rollover” effect.
Is it possible to change the text above on mobiles one to “refer to key for more information”?One shall be replaced by the other basically.
Thank you
Hey!
Can you please post the link to your page where we can see your hotspots element?
Regards,
YigitHey!
try this code in Quick CSS field:
.av-hotspot-fallback-tooltip { display: none !important; }Regards,
AndyHi Andy,
Thank you for your help.
The code provided hid the text on mobile. The text should not be hidden.
Two possible scenarios if you can help us, for the mobile version of the image hotspot:
1) Disable the “mobile version” for the image hotspot module and display it in the exact same way as the desktop. This means that instead of showing 8 hotspots in the image and 8 text boxes below the image, it would work in the same way as the desktop does: hover the hotspot and a popup displays the textOR, if the above is not possible:
2) We have the following text next to the image: “Please rollover a city for more details”. Is it possible to replace this text on mobiles only to “refer to key for more information”?
One or the other would work really.
Many thanks for your help.
Hi there,
Is there any news about this issue with the image hotspots element?
After some consideration, and as I can see this seems to be a difficult task, I wonder if there is a way to simply go with option 1 as mentioned on my last post?
1) Disable the “mobile version” for the image hotspot module and display it in the exact same way as the desktop. This means that instead of showing 8 hotspots in the image and 8 text boxes below the image, it would work in the same way as the desktop does: hover the hotspot and a popup displays the textIf there is a Quick CSS code for this, much better.
Many thanks.
Hi!
refuse from bumping into your own thread, as it pushes it behind in our queue and marks it as “answered”, so we can’t provide a faster reply to you.
Try this solution mentioned here: https://kriesi.at/support/topic/mobile-hotspot-problems/#post-443138
Cheers!
AndyHi Andy,
I just posted twice as it is unusual to wait more than 48h for a reply. I’ll take that in consideration for the future.
As for the link provided I believe this is not exactly what I need. I was asking to “disable” the mobile version of the image hotspots altogether and display it as it shows on desktop screens. Is this possible?
Thank you
Hey!
try this code in Quick CSS field:
.av-hotspot-fallback-tooltip { display: none !important; }With this it should look like on desktop. Hope it works for you.
Cheers!
AndyHi Andy
Unfortunately the code provided has just removed the text below the image (the text that should appear in the hotspots on mouse hover).
Please check the link in private.Hey!
I think Kriesi had good reasons to use a different behavior for hotspots on mobile. I am sorry, but it won’t be possible to get a responsive result using the desktop version on mobile.
Regards,
AndyHi Andy,
I am sure Kriesi has valid reasons to show hotspots on mobile and the alternative way to show it is ok for most users but useless for this specific website.
I tested this on iPad (same touchscreen idea) and it worked perfectly so, all I am asking is the CSS code that changes the hotspots model on smaller screens (i.e. mobile devices). If there is a better way to set a specific resolution to show the mobile version to “trick” the hotspots module I am fine with that! Some sort of condition such as “show hotspots mobile version if width <= 100 pixels”. This way the mobile would display it as the desktop version.
Is there anyone else from your team (a colleague or even Kriesi) that can step in to make this happen?
Many thanks.
Hey!
there is no easy solution to achieve this and it would require a huge amount of time and customization of the theme. Unfortunately this is out of our support scope, as written in our support policy. You would need to hire a freelance developer for this job.
Regards,
AndyIt is sad that a great module such as the image hotspot has a totally different behaviour in mobiles from the desktops and there is no flexibility to simply disable the mobile version on mobiles. I can not be 100% sure as I am not a programmer but according to my brief experience this task seems to be quite easy by applying the right CSS code that “overrides” the mobile version.
I can not agree that this is a “customization of the theme” that is out of your support scope because I am not asking for any changes on the normal theme as it is displayed on desktop. The feature already exists and I do not need any changes. The only quick “fix” I am requesting is to disable the mobile version for the hotspot module and display it exactly as it is show on tablets and desktops, that’s it.
Can you please try to have Yigit or Josue involved on this just to have a quick look to see if they find a quick workaround this? If they don’t have a solution as well after a quick look, my apologies for the long post and thank you all for trying.
Thank you.
Hey!
The image hotspot is different on mobile device because of the following reasons:
1.) Mobile devices don’t support hover state so it’s not going to work as it should.
2.) There is not enough space to accommodate the tool tip especially when you use long text.Forcing it to display on mobile devices will either break the shortcode or it will just look crappy. You can try this in the Quick CSS field:
@media only screen and (max-width: 767px) { .responsive .av-mobile-fallback-active.avia-tooltip { visibility: visible; } }Remove browser cache then reload the page.
Regards,
IsmaelHi Ismael,
Thank you for reviving this post with a new attempt, however, the CSS code provided did not produce any effect or change on the image hotspots area.
Regarding the explanations:
“1.) Mobile devices don’t support hover state so it’s not going to work as it should.”
I tried this on iPad which uses the same technology as iPhone for example and hover state works fine there!2.) There is not enough space to accommodate the tool tip especially when you use long text.
We have little text and hope the tool tip does note cover the whole screen… hopefully will not…If there is a way to override the mobile version on mobile at all costs for the image hotspot?
Many thanks
Hey!
I tested the code above and it enables the hotspots on mobile devices. This is what I see when I emulate the device:
-> see private content
As you can see the tooltip is outside the container which is another reason why it is disabled on smaller screens. Please hire a freelance developer if you want to modify the hotspot script. You can contact our partner, codeable: http://kriesi.at/contact/customization
Best regards,
IsmaelDear Ismael,
(EDITED):
I have just tried again and cleared the cache on my mobile device and now I can see the tooltips and they are looking just fine!
I understand your concerns about the tooltips positioning but I can manually change their position one by one and I am sure this will work fine.How can we hide the numbers from the tooltips and also hide the text that is showing below the map? I mean… the text from the tooltips that is being displayed with the numbered bullets? If we hide both, the problem is finally solved :)
Pls check my private contents below as well
Thank you
Hey!
unfortunately you can’t easily remove numbers on hotspots. Remove elements below with this code:
@media only screen and (max-width: 767px) { .av-hotspot-fallback-tooltip-count { display: none !important; } .av-hotspot-fallback-tooltip-inner.clearfix { display: none; }}Cheers!
AndyThank you Andy, Ismail and Yigit for your help. Overall it is a great solution in my opinion and it proves that mobiles (at least Safari on iOS) can process the hover effect perfectly fine on the image hotspots at least by tapping instead of hovering obviously.
The issue with the popup positioning could probably be fixed by adapting the code a bit but it is possible to manually adjust them. I did it successfully in my testing environment. Where can I suggest this to be part of Enfold in the future?
Many thanks.
- You must be logged in to reply to this topic.