工具提示不适用于 JQuery 1.11.2

Question

我试图在鼠标悬停时在标签上显示工具提示。我按照这个 Tooltip tutorial 来让它们工作。本教程使用 JQuery 1.4.2，我的项目基于 JQuery 1.11.2。工具提示适用于 1.4.2 但不适用于 1.11.2。

是否在 JQuery 中删除了对工具提示的支持？我遗漏了什么吗？

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <style type="text/css">
            #hint{
                cursor:pointer;
            }
            .tooltip{
                margin:8px;
                padding:8px;
                border:1px solid blue;
                background-color:yellow;
                position: absolute;
                z-index: 2;
            }
        </style>
    </head>

    <body>
        <h1>jQuery tooltips example</h1>
        <label id="username">Username : </label><input type="text" / size="50"> 
        <span id="authentication-password-tooltip">Password(?)</span>
        <script type="text/javascript">
            $(document).ready(function() {
                var changeTooltipPosition = function(event) {
                    var tooltipX = event.pageX - 8;
                    var tooltipY = event.pageY + 8;
                    $('div.tooltip').css({top: tooltipY, left: tooltipX});
                };
                var showTooltip = function(event) {
                    $('div.tooltip').remove();
                    $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
                        .appendTo('body');
                    changeTooltipPosition(event);
                };
                var hideTooltip = function() {
                    $('div.tooltip').remove();
                };
                $("span#authentication-password-tooltip,label#username'").bind({
                    mousemove : changeTooltipPosition,
                    mouseenter : showTooltip,
                    mouseleave: hideTooltip
                });
            });
        </script>
    </body>
</html>

Answer 1

从您的 $("span#authentication-password-tooltip,label#username'") 中删除 '；它破坏了脚本。

Here's a working jsFiddle

一些一般性建议：正如评论中所指出的，当您遇到 JavaScript 错误时，您应该始终首先检查控制台。另外，1.4.2 is very old now（超过 5 年）。发生了很多变化，所以您以后应该尝试寻找更多最新的教程。

工具提示不适用于 JQuery 1.11.2

Tooltip not working with JQuery 1.11.2

css

jquery

jquery-ui

jquery-tooltip

jquery-ui-tooltip