Popup box on hover

[Nate_Sheridan]

Hi,

I thought there was a popup element or am I just not finding it?

If not, is there a way to implement a popup box?

ideally I would like to activate a component on hover. At the moment I have placed my competent in a modal that’s triggered on clicking a link.

Thanks in advance.

[ruenel]

Hello @Nate_Sheridan,

Thanks for writing in! Regretfully, we do not have an element that pops up on hover. The Modal element can only be triggered with a click.

Cheers.

[Nate_Sheridan]

Ok. Thanks for the clarification.

I managed to get modal to popup on hover using Java Script.

[tristup]

Hi @Nate_Sheridan,

Glad that you are able to manage this work.

[pabradley]

Hi @Nate_Sheridan. Would you mind sharing how you managed to get it to work? I’m very interested in the same functionality. Thanks!

[Nate_Sheridan]

Hiya,

Not going to lie, it was very difficult! But will do my best to explain.

1. I used the model element for the popup. I created it as a component to make editing easier in the future.
2. The buttons to trigger the modal need to be on the page for hover to work, but I just hid them by making it a very small pixel tucked away in the corner.
3. For each modal popup, under ‘customise’, add a name to the ‘toggle hash’ box.
4. I then added the ‘toggle hash’ names to the menu item that I wanted to trigger the hover.
5. So now it was a case of having my new menu trigger the custom modal popup on click.
6. Then I used this jQuery code to tell the custom menu items to trigger on hover rather than click:

<!-- jQuery to show/hide submenu on hover -->
<script>
$(document).ready(function(){
    $('.menu-item').hover(
        function() {
            // Mouse enters the menu item
            var submenuId = $(this).data('submenu');
            $('#' + submenuId).show();
        },
        function() {
            // Mouse leaves the menu item
            var submenuId = $(this).data('submenu');
            $('#' + submenuId).hide();
        }
    );
});
</script>

The jQuery was placed in a raw HTML element along with the HTML code for the menu.

[tristup]

Hi @Nate_Sheridan,

By withdrawing the post, I believe you already have resolved the issue. If the issue still existed, you can let us know.

Thanks.