Show module as hover item

Question

I want to show a module when a page is loaded for the first time, but the module is in a hover type position so it's not actually on the page. Please see the image here for a better description:

What's the best way to achieve this?

Answer 1

You can add a new module position to your template, close to the icon you want to use to trigger it. Add something like this to JOOMLAROOT\templates\YOURTEMPLATE\index.php:

<?php if ($this->countModules('hiddenmodule')) : ?>
   <!-- Begin Hidden module-->
    <div id="hiddenModule" style="display:none">
            <jdoc:include type="modules" name="hiddenmodule" style="xhtml" />
     </div>
   <!-- End Hidden module-->
<?php endif; ?>

In JOOMLAROOT\templates\YOURTEMPLATE\templateDetails.xml:

<position>hiddenmodule</position>

Now style the div width id hiddenmodule using CSS, and use jQuery to trigger the display CSS value on hover.

Answer 2

What you could do is trigger a mouseover event using jQuery once the DOM is ready, like so:

jQuery(document).ready(function($){
    $('.element').trigger('mouseover');
});

I think the best thing to do first is to inspect the element in your browser, hover over the icon and see if any classes are add once hovered upon. If so, then you could do thing a little differently and add that same class on page load which might automatically show the box.