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
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>