在JavaScript中使用“onmouseover”显示工具提示

Question

在JavaScript中使用“onmouseover”显示工具提示

9

我正在尝试使用JavaScript创建小型对话框，当用户悬停在字段上时，该对话框将提醒他们如何输入数据。我非常新手，可能完全错误地使用JavaScript。

以下是我的代码：

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

然而这个函数并没有起作用，虽然当鼠标移开和悬停在标签上时会发生一些变化，但并不是我期望的变化。我希望一个小的

会出现，并且里面有帮助信息。最好是在

中还有一个关闭按钮，能够调用onclick函数并删除

，但我不知道如何使用onclick方法来移除元素。

如果能提供关于如何解决onmouseover功能或如何实现使用onclick关闭

的方法，将不胜感激。

提前致谢。

- user3298004

1

这是您想要的 http://jsfiddle.net/fTpwF/ - Karthick Kumar

4个回答

4

您可以仅使用CSS和HTML。

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>

- Vitthal

您的CSS将无法用于那些被公司强制使用IE的XP用户。这在我的国家代表了大量的用户（许多公司仍然像四年前使用2000一样使用XP）。 - user2284570

1

使用您的代码，您使用按钮而不是 div。要使用 innerHTML 影响 div，您需要像这样做：

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

要使X按钮起作用，请使用以下代码：

<button onclick="javascript:mOut('my_div');">X</button>

- cyborg86pl

1

我认为你的js函数没有问题，但是你的html结构真的很混乱。我改变了你的HTML结构，并且在使用你提供的相同代码时实现了你想要的功能。

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

- Fred Wu

嗯... innerHTML太邪恶了! 如果你的代码使用innerHTML，那么你不能在Mozilla网站上发布你的Firefox扩展。 - user2284570

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robin C Samuel · Accepted Answer

你可以使用Bootstrap或任何其他JavaScript库，与jQuery一起实现相同的目的。最好使用它们。

请查看下面的代码。

HTML

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

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