Is there a way to create small dialogue boxes using JavaScript for user guidance when entering data into a field by hovering over them? I am new to JavaScript and not sure if my approach is correct.
Here is the code I have:
<html>
<head>
<style type="text/css">
#button {
border-radius: 50%;
border: 1px solid black;
padding-top: 3px;
padding-bottom: 3px;
}
#info {
margin-left: 5%;
}
#help_container {
border: 0.5px solid black;
background-color: #efefef;
width: 20%;
}
#close {
float: right;
margin-top: 1%;
background-color: #efefef;
border: 0px solid #efefef;
}
#help_text {
margin: 5%;
font-family: Arial;
font-size: 15px;
}
</style>
</head>
<body>
<div>
<button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
</div>
<script>
function mOver(obj) {
obj.innerHTML = "<div id='help_container'><button id='close'>X</button><p id='help_text'>Help Text</p></div>";
}
function mOut(obj) {
obj.innerHTML = "<button id='button' onmouseover='mOver(this)' onmouseout='mOut(this)'>?</button>";
}
</script>
</body>
</html>
I'm experiencing issues with the function as it's not working as expected. When hovering over or away from the button tag, changes occur but not the ones I anticipated. My goal was to display a small div with help text inside, and ideally include a close button within the div that triggers a function to remove the element using onclick, but I am unsure how to achieve this.
Any suggestions on resolving the onmouseover function or implementing a way to close the div with onclick would be highly appreciated.
Thank you in advance!