Using onmouseover to display tooltip in javascript

2019-04-25 07:18发布

站内问答 / JavaScript
469 4 4

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

        <html>
            <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>
            </script>
         </body>


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

4条回答
迷人小祖宗
2楼-- · 2019-04-25 07:45

You can use bootstrap, or any other javascript libraries, along with jQuery for the same purpose. Its better to use them, Please have a look at,

HTML

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

Script 

    $('a[data-toggle="tooltip"]').tooltip({
         animated: 'fade',
         placement: 'bottom',
     });


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

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
3楼-- · 2019-04-25 07:45

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>
查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
4楼-- · 2019-04-25 07:53

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>
查看更多
0人赞 添加讨论(0) 举报
Viruses.
5楼-- · 2019-04-25 08:08

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)