jquery鼠标跟随提示框

基础概念

jQuery鼠标跟随提示框是一种常见的网页交互效果，当用户将鼠标悬停在某个元素上时，会显示一个提示框，提示框会跟随鼠标的移动而移动。

类型

静态提示框：提示框固定在某个位置，不随鼠标移动。
动态提示框：提示框跟随鼠标移动，始终显示在鼠标附近。

应用场景

工具提示：在用户悬停某个按钮或图标时，显示该按钮或图标的功能说明。
数据展示：在用户悬停某个数据点时，显示该数据的详细信息。
帮助信息：在用户悬停某个功能区域时，显示该区域的操作指南。

示例代码

以下是一个简单的jQuery鼠标跟随提示框的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery鼠标跟随提示框</title>
    <style>
        .tooltip {
            position: absolute;
            background: #333;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="tooltip"></div>
    <button class="tooltip-target">悬停我</button>

    <script>
        $(document).ready(function() {
            var tooltip = $('#tooltip');

            $('.tooltip-target').hover(function() {
                var title = $(this).attr('title');
                tooltip.html(title);
                tooltip.css({
                    display: 'block',
                    left: event.pageX + 20,
                    top: event.pageY
                });
            }, function() {
                tooltip.css('display', 'none');
            });

            $(document).mousemove(function(event) {
                tooltip.css({
                    left: event.pageX + 20,
                    top: event.pageY
                });
            });
        });
    </script>
</body>
</html>