Menu
I'm trying to use JavaScript to create small dialogue boxes which will advise the user how to enter data into a field when they hover over them. I'm extremely new to using JavaScript so I could be going about this completely the wrong way.
Below is my code:
<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>
However the function is not working, changes do happen when hovering over and away from the button tag but not the changes I had expected. I was hoping a small div would appear with help text written inside. Ideally I would also like to have a close button appear within the div that could call a function onclick and remove the div but I am unsure how to remove elements using the onlick method.
Any help on how to solve the onmouseover function or how to implement a way of closing the div using onlick would be greatly appreciated.
Thanks in advance
534
You can use Bootstrap, or any other JavaScript library, along with jQuery for the same purpose. It's better to use them.
Please have a look at the code below.
<a data-toggle="tooltip" title="add to cart">
<i class="icon-shopping-cart"></i>
</a>
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});.cart {
overflow: hidden;
padding: 10px 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="cart">
<a data-toggle="tooltip" title="add to cart">
<i class="icon-shopping-cart"> Cart</i>
</a>
</div>You can use CSS and html only..
CSS:
<style type="text/css">
div#tooltip a span {display: none;}
div#tooltip a:hover span {display: block;
position: relative; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: black; background-color:#FFFFCC; border: 1px solid #ccc;
font: 10px Verdana, sans-serif; text-align: center;}
div#tooltip a {
position:relative;
}
div#tooltip a span {
display:none;
}
div#tooltip a:hover span {
display:block;
position:absolute; width: 100px;
color: black; background-color:#FFFFCC; border: 1px solid #ccc;
font: 10px Verdana, sans-serif; text-align: center;
}
div#tooltip a:hover {text-indent:0;}
#tooltip button { border-radius: 50%;
border: 1px solid black;
padding-top: 3px; }
</style>
HTML:
<div id="tooltip">
<a href=""><button id="button" >?</button>
<span>This is an example of some hover text!</span>
</a>
</div>
I don't think your js function has anything wrong, but your html structure is really in a mess. I changed the structure of your HTML and realize the function you what with the same code you provide.
<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>
<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>
</head>
<body>
<div>
<button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
