工具提示不适用于JQuery 1.11.2

时间:2015-04-15 10:39:13

标签: jquery css3 jquery-ui jquery-tooltip jquery-ui-tooltip

我试图在移动悬停时在标签上显示工具提示。我按照这个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>

1 个答案:

答案 0 :(得分:1)

'中删除$("span#authentication-password-tooltip,label#username'");它打破了剧本。

Here's a working jsFiddle

一些一般性建议:正如评论中所指出的,当您遇到JavaScript错误时,应该首先检查控制台。此外,1.4.2 is very old now(超过5年)。很多已经改变,所以你应该尝试在将来寻找更多当前的教程。