Text Popups OnMouseOvers, No WeaselOvers Allowed - popup

Question

Jeopardy: "a gimmick to separate it from other quiz and game shows. Because the prompt is the answer!"
This weaselly question appears to be OK, .. But what a terrible coding (Hole) I've dug for myself in the process.
I have a problem, in that I want to create several sets of:-
-- [ div text popup rollovers ]
-- [ that appear and disappear again ], but only when a mouse goes into, and then out of an <a href link, as in:-
<a href="#"
onmouseover=show('popup1')
onmouseout=hide('popup1')>Help Text One</a>
<br /><br /><br />
<a href="#"
onmouseover=show('popup2')
onmouseout=hide('popup2')>Help Text Two</a>
This weasel is an insidious creature to track down, being as all the other weasels are far too clever by half, and for the life of me I couldn't see what was really happening as the other weasels were running: nor even where the Ron Weaselly code went in my Harried Pottering Code.
This website has helped me so many times in the past, that I wanted to give a [ pop-goes-the-weasel ] back to future generations.

Answer 1

The answer to my rollover weasels is found here, that also has a rider attached:-
"It’s also perfectly fine to ask and answer your own question, as long as you pretend you’re on Jeopardy! — phrase it in the form of a question."
Here's the [ text rollover popup solution ] that I end up with, and this was after a day and a half of mumbling to myself and re-editing on codepen.io, then mumbling some more to get the simple coded weasel to popup on command.
Note: the resulting rollover code doesn't look that impressive, but it works. My issue now is whether it could made to work even better, and be made even simpler without me getting lost in the Triwizard Maze, populated by popping weasels of course.
Not sure if codebase.io examples are allowed here, being as all of the demonstrations I've seen thus far are in (fiddle.)
So I've created a fiddle account for you knowledgeable folks to give it the once over.
** Note: I've also magicked up a rather helpful line of helpful text: that actually gets changed by JS, to then reflect the state of the variables going (on) in the JavaScript section, the (alert) popup kept stopping the code from working.
The weaselly fiddly link is as follows:-
https://jsfiddle.net/terrymcb/4gL0ntvs/
Here's the HTML code, three blind rollover links that correspond to three divs, that are individually nested.
<p>DIV BOX ROLLOVERS</p>
<a href="#"
onmouseover=javascript:show('gcinfo')
onmouseout=javascript:hide('gcinfo')>TEXT-1</a> JS-1
<br /><br /><br />
<a href="#"
onmouseover=javascript:show('ucinfo')
onmouseout=javascript:hide('ucinfo')>TEXT-2</a> JS-2
<br /><br /><br />
<a href="#"
onmouseover=javascript:show('uainfo')
onmouseout=javascript:hide('uainfo')>TEXT-3</a> JS-3
<br /><br />
<p id="tValue"> Show in-out OBJ value. </p>
Here's the DIVS laid out.
<div id="ucinfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is the ucinfo included text.</p>
</div>
</div>
<div id="uainfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is the uainfo included text.</p>
</div>
</div>
<div id="gcinfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is gcinfo included text.</p>
</div>
</div>
The CSS, dialog box followed by three outer classes: (visible & display?) Over kill perhaps.
.dialog {
position: fixed;
top: 50px;
right: 50px;
bottom: 50px;
left: 150px;
z-index: 10;
display: flex;
padding: 1em;
background-color: rgba(0,0,0,.100);
/* opacity: 1; */
pointer-events: pointer;
transition: .25s ease-out;
}
#uainfo {
visibility: hidden;
display: none;
}
#ucinfo {
visibility: hidden;
display: none;
}
#gcinfo {
visibility: hidden;
display: none;
}
The all important JavaScript, note: I've cleaned the variables on every call, it seems to keep the function functioning, but I might well be paranoid at this point where JS is concerned. What I do know for a fact, is that calling the document.getElementById( direct keeps failing with the second call to JS, and I've no idea why! - Which is why the variables disp and vist have been used.
function hide(obj) {
disp0 = '0';
visp0 = '0';
disp0 = document.getElementById(obj);
visp0 = document.getElementById(obj);
disp0.style.display="none";
visp0.style.visibility="hidden";
document.getElementById("tValue").innerText='hide ' + obj;
}
function show(obj) {
disp1 = '0';
visp1 = '0';
disp1 = document.getElementById(obj);
visp1 = document.getElementById(obj);
disp1.style.display="block";
visp1.style.visibility="visible";
document.getElementById("tValue").innerText='show ' + obj;
}
That's all folks ..