Using "onmouseover" to display a tooltip in JavaScript

user3298004 picture user3298004 · Apr 1, 2014 · Viewed 59.3k times · Source

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

Answer

Robin C Samuel picture Robin C Samuel · Apr 1, 2014

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.

HTML

<a data-toggle="tooltip" title="add to cart">
    <i class="icon-shopping-cart"></i>
</a>

JavaScript and CSS

$('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>