Using "onmouseover" to display a tooltip in JavaScript

StackOverflow https://stackoverflow.com/questions/22784677

سؤال

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.

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>

نصائح أخرى

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>

with your code, you operate with button, not div. to affect on div with innerHTML you need something like this:

<div id="my_div">
<button id="button" onmouseover="javascript:mOver('my_div');" onmouseout="javascript:mOut('my_div');">?</button>
</div>

to make X button work, use this:

<button onclick="javascript:mOut('my_div');">X</button>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top