Help Message Layer with JavaScript
A help or message layer can appear next to an icon, field or other control and then disappear when the user moves away. The original Plus2net example uses a help image, two Show/Hide buttons, and a second message that can be closed with a link. Those facilities are preserved below.
For pointer users the message can appear on hover; for keyboard users the same help image should also respond to focus. The modern example uses the native hidden property instead of repeatedly assigning style.display.
Div Tag · Positioning of Div · Mouseover Div Layer on links · Show & Hide Div Layer
onmouseover and onmouseout event Demo of message layer
Complete Working Source Top ↑
The old source referenced graph.jpg, which is not in the supplied folder. The working original demo uses images/help.jpg, so the complete source below uses that existing asset.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Help message layer demo</title>
<style>#sub3, #sub4 {
background-color: #f1f1f1;
width: 150px;
padding: .5rem;
color: #000;
border: 2px dashed #0000cc;
}</style>
</head>
<body>
<button type="button" id="show-layer">Show Layer</button>
<button type="button" id="hide-layer">Hide Layer</button>
<p>
You can place your mouse over or focus this image ->
<img src="images/help.jpg" id="help-image" tabindex="0" alt="Help">
</p>
<div id="sub3" hidden>Message Box :</div>
<p>
You can see the help menu on mouseover or focus of this image ->
<img src="images/help.jpg" id="close-help-image" tabindex="0" alt="Help">
</p>
<div id="sub4" hidden>Message Box : <a href="#" id="close-help">Close</a></div>
<script>
const showButton = document.getElementById('show-layer');
const hideButton = document.getElementById('hide-layer');
const helpImage = document.getElementById('help-image');
const closeImage = document.getElementById('close-help-image');
const message = document.getElementById('sub3');
const closeMessage = document.getElementById('sub4');
const closeLink = document.getElementById('close-help');
function setVisibility(element, visible) {
element.hidden = !visible;
}
showButton.addEventListener('click', () => setVisibility(message, true));
hideButton.addEventListener('click', () => setVisibility(message, false));
['pointerenter', 'focus'].forEach((eventName) => {
helpImage.addEventListener(eventName, () => setVisibility(message, true));
});
['pointerleave', 'blur'].forEach((eventName) => {
helpImage.addEventListener(eventName, () => setVisibility(message, false));
});
['pointerenter', 'focus'].forEach((eventName) => {
closeImage.addEventListener(eventName, () => setVisibility(closeMessage, true));
});
closeLink.addEventListener('click', (event) => {
event.preventDefault();
setVisibility(closeMessage, false);
});
</script>
</body>
</html>
Event Handling onMouseOver and onMouseOut
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
