Hover Box on Mobile mode

I have hover boxes on my site, there are “skills” listed, and when your cursor is over the word, the box changes and shows the meaning of the skill.

This feature doesn’t work on the mobile version. How can I write a code for the mobile version, so if you tap on the “skill” a text box pops up with the meaning?

Thanks

Hover boxes from the Wix Editor itself will only work on desktop versions of your website. On mobile versions, it will only show the single page as you can’t hover over a mobile.
https://support.wix.com/en/the-wix-editor/hover-box

if this is all you are trying to achieve with the use of Wix Editor hover boxes, then you need to go through Wix Support as it is an Editor issue and not a code problem.
https://support.wix.com/en/article/contacting-wix-support

As for using code onMouseIn and onMouseOut will only work on desktop devices and will not work on mobile devices as you have no mouse to use to hover over any element.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut
https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick

You need to use onClick instead of onMouseIn or onMouseOut, you can do this simply by using Wix Window API and the Form Factor function and have seperate code that works on desktop devices and mobile devices.

https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices

Is this something wix will implement soon. I lost a client because he really wanted hover on mobile. He showed me his friend’s website built on Square Space and it is possible. :disappointed_relieved::disappointed_relieved::disappointed_relieved:

Well actually if you go into details with this then SquareSpace don’t do it themselves either through their own editor, which is the exact same way that Wix do it as well.

To do it through SquareSpace you still have to do it through Custom code which SquareSpace won’t help you with and you have to go through their own Forum like the Wix Corvid Forum.

https://forum.squarespace.com/topic/157142-show-text-before-hover-on-mobile-device/

https://support.squarespace.com/hc/en-us/articles/205815398-How-will-my-site-appear-on-mobile-devices-
Can I add custom CSS to change the mobile layout of my site?
Yes, this is possible with custom code, but this is an advanced modification. We’re unable to offer help with this setup or any third-party code modification or addition. We recommend visiting the Squarespace Forum for code-based questions. For more information on adding custom CSS, visit Using the CSS Editor.

So, as they have managed to do it through custom code in SquareSpace, you will need to do it through custom code in Wix if you want to do similar and keep the “show text after hover” on the desktop browser and “show text before hover” on mobile devices.

You might need to create two elements here, one to be shown on the desktop with the original hoverbox and then another element that only shows on mobile and simply set it to show the text for a set time and then hide the text and show something afterwards.

Oh, I see. Good idea. I’ll try it.
Thanks. Just hope they have more stuff on mobile soon like parallax, etc. My clients are always asking. I’ve had an avalanche of people wanting websites now. In April I did like 10 websites already and have about 15 on my plate now and everyone wants interaction on the mobile :sweat:
Thank you,
Felipe

Based on GOS’ comment about, wrote some code to do visibility toggling with a controlling “toggler” (something that you mouse over on desktop, click on on mobile) and a controlled “to-be-toggled” item. Hopefully the terminology makes sense.

Also hopefully this isn’t reinventing the wheel, but looks to me like hover box functionality still isn’t present in mobile, so I needed to come up with something…

/*
Steps for using this custom visibility toggling code, on a single toggler/toggled item pair
1. create item for viz toggling. Get its id. Get the id of the mouse over/click toggler event target that will toggle viz for said to-be-toggled item
2. add an entry to visibility_item_map with key as toggler event target id and value as to-be-toggled item id
3. view properties for the to-be-toggled item and set "hidden on load" to checked (if you want it to be hidden at first on page load)
4. view properties for the toggler target and set the 3 onMouseIn/Out and onClick handlers to their respective functions below.
*/

// lookup table for visibility toggling. Matches event targets to the items for which they will toggle visibility
let visibility_item_map = new Map();
visibility_item_map['text1'] = 'text107';
visibility_item_map['column22'] = 'text108';
visibility_item_map['column21'] = 'text109';
visibility_item_map['column20'] = 'text110';

// upon mouseIn on target, show item
export function mouseIn_show_item(event) {
 // this is the id of the event's target. This should be a key into the lookup table matching targets -> items
 let event_target = event.target.id;
 // this is the id (e.g. "#text107" without the leading "#") of the item that will be shown
 let item_id = visibility_item_map[event_target];
 // show the item
 // note: add "fade" if you want a slower effect
  $w("#" + item_id).show();
}

// upon mouseOut on target, hide item
// See docs for mouseIn_show_item()
export function mouseOut_hide_item(event) {
 let event_target = event.target.id;
 let item_id = visibility_item_map[event_target];
  $w("#" + item_id).hide();
}

// upon click on target, toggle item visibility
// See docs for mouseIn_show_item()
export function click_toggle_item_viz(event) {
 // console.log("hi");
 let event_target = event.target.id;
 let item_id = visibility_item_map[event_target];
 // note this doesn't really seem to work for tablet, at least an ipad, in testing
 if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet") {
 if($w("#" + item_id).hidden){
      $w("#" + item_id).show();
    }
 else{
      $w("#" + item_id).hide();
    }
  } 
}

Wix could do a one-up on Squarespace if they modified the hover box so that when it’s in mobile, it automatically switches between the two images and the user can set the timing for each image. Or, they could just build in the code for mobile so that tapping on the image shows the hover image. That probably makes more sense.

1 Like

You can vote for this feature here: https://support.wix.com/en/article/wix-editor-request-choosing-the-display-of-your-hover-box-on-mobile