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

debugcn 发表于 Dev

用户名

我正在尝试使用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>

但是该功能无法正常工作，将鼠标悬停在button标签上或从标签上移开时，确实会发生更改，但不是我期望的更改。我希望div会出现一个小的文字，里面写有帮助文字。理想情况下，我还希望在div可以调用函数onclick并删除的窗口中出现一个关闭按钮，div但是我不确定如何使用该onlick方法删除元素。

任何有关如何解决onmouseover功能或如何实现关闭div使用方式的帮助onlick将不胜感激。

提前致谢

罗宾·c·塞缪尔

出于相同的目的，您可以将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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。