Triggering hover over

[wolfproductions]

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

[Ismael]

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

[wolfproductions]

Thanks, have tried that but not doing anything??

[Ismael]

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

[wolfproductions]

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

[Ismael]

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

[wolfproductions]

Thanks Ismael, how do I vary the code please, client now wants it triggered by a click not hover. Thanks for your help

[Ismael]

Hello,

Please look for the following code, then replace “mouseenter” with “click”:

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

I forgot to mention that you can also use the Toggle Hash field. Please check this documentation: https://theme.co/docs/toggleable#toggle-hash

[wolfproductions]

Thanks Isamel, appreciate it

[Ismael]

No worries! Let us know if you have more questions. Have a nice day.