Web Forms - Flyout Menu/Tooltip Demo

Edit: added codepen snippet at Master Hedley's request; updated javascript to include onmouseleave event.  Updated attached package.

I received a request last week to put together a demo project detailing how to create a simple flyout menu with static values.  Here's a bit about the project, and then the project is of course attached at the end.

Image may be NSFW.
Clik here to view.

This very simple demo consists of an initialize data component, which declares the variables we intend to use in the project.  We are also able to give those variables value(s) if desired.

A merge text component is used to build the html we will include on the form in the IncludeHTML component.  In this case we will be including a style section for CSS, as well as importing a font from Google.

We've adjusted the embedded form theme to use the css classes that match the css we built in the merge text component previously.  More info halfway through the article here on how to edit themes.

Image may be NSFW.
Clik here to view.

On the form itself, we can see the small (20x20) IncludeHTML component at the top/center.  

Image may be NSFW.
Clik here to view.

Note that the panels being used to hold the flyout menus are situated statically where they need to be at runtime.  Additionally, these components are given a "hidden" style class initially; javascript is used to show the panels when an event fires, in this case, mouseover of the parent menu.

TIP: it's often a good practice to issue control IDs to all components on your form if you intend to use custom javascript on your forms.  it also makes it much easier to read the html at runtime if you want to inspect elements.

We give our form an onload event that looks like this:

var mLab1 = document.getElementById('MenuLabel1');
var mLab2 = document.getElementById('MenuLabel2');
var mPan1 = document.getElementById('MenuPanel1');
var mPan2 = document.getElementById('MenuPanel2');

mLab1.setAttribute("onmouseover","ShowPanel('MenuPanel1'), HidePanel('MenuPanel2')");
mLab2.setAttribute("onmouseover","ShowPanel('MenuPanel2'), HidePanel('MenuPanel1')");

mPan1.setAttribute("onmouseleave","HidePanel('MenuPanel1')");
mPan2.setAttribute("onmouseleave","HidePanel('MenuPanel2')");

document.documentElement.style.visibility = 'visible';

And we include this in the Script section:

document.documentElement.style.visibility = 'hidden';

function ShowPanel(Panelid) {
  var sPan = document.getElementById(Panelid);
  sPan.className = 'gaMenuPanel';
}

function HidePanel(Panelid) {
  var sPan = document.getElementById(Panelid);
  sPan.className = 'gaHiddenElement';
}

Note: the document.documentElement.style.visibility script is used to prevent FOUC.  more info on that here.

Inside the Panel components are list components, which are holding our menu lists and can be whatever data type you need for your project.  

See the attached demo project for a live look at how it works, and as always, contact me with any questions.  This can be adjusted to suit; this is what was needed/required by the gentleman who requested the demo.