Triggering hover over

Support
#1

Hi, there there a way I can trigger a modal via hovering over a headline element please? Thanks so much

#2

Hello @wolfproductions

Thank you for the inquiry,

This is possible, but it will require a custom script. First, move the headline element inside a Div element, then enter "x-toggle-modal-hover" in the Customize > Class field. Next, edit the Modal element, go to the Customize tab, and enter "modalpopup" as the Toggle Hash . After that, add the following script in the Custom Code > Global JS field.

document.addEventListener('DOMContentLoaded', function () {
  function xToggleModalOnHover() {
    const modalState = window.xToggleGetState("modalpopup");
    const modalToggle = document.querySelector('.x-toggle-modal-hover');
    const modalDefaultToggle = document.querySelector('[data-x-toggle-hash="modalpopup"]');

    if (!modalToggle) {
      console.warn('Element with class .x-toggle-modal-hover not found.');
      return;
    }

    if (typeof window.xToggleUpdate !== 'function') {
      console.error('xToggleUpdate function is not defined.');
      return;
    }
    
    if (!modalDefaultToggle) {
      console.warn('Element with data-x-toggle-hash="modalpopup" not found.');
      return;
    }

    modalToggle.addEventListener('mouseenter', () => {
      window.xToggleUpdate('modalpopup', true);
      modalDefaultToggle.click();
    });
  }

  xToggleModalOnHover();
});

If you need more help with this type of customization, please check out our One service.

Best regards,
Ismael

#3

image

image

Thanks, have tried that but not doing anything??

#4

You have to add “modalpopup” to the Customize > Toggle Hash field of the Modal element.

11
11318×948 26.9 KB

#5

Ahh I see, so I need to hide the toggle from the front end as well? Thanks

#6

Yes, you can hide the default toggle element. Let us know if you need more info.