jquery鼠标悬停提示框

基础概念

jQuery鼠标悬停提示框是一种常见的网页交互功能，它允许用户在鼠标悬停在某个元素上时显示额外的信息。这种提示框通常用于提供有关元素的详细信息，增强用户体验。

类型

简单提示框：显示简单的文本信息。
富提示框：显示更复杂的内容，如HTML、图片等。

应用场景

产品详情：在商品列表中悬停显示商品详细信息。
帮助提示：在按钮或链接上悬停显示操作说明。
数据展示：在图表或表格单元格上悬停显示详细数据。

示例代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Hover Tooltip</title>
    <style>
        .tooltip {
            position: absolute;
            background-color: #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" class="tooltip"></div>
    <ul>
        <li data-tooltip="This is the first item">Item 1</li>
        <li data-tooltip="This is the second item">Item 2</li>
        <li data-tooltip="This is the third item">Item 3</li>
    </ul>

    <script>
        $(document).ready(function() {
            $('ul li').hover(
                function() {
                    var tooltipText = $(this).data('tooltip');
                    $('#tooltip').text(tooltipText).show();
                },
                function() {
                    $('#tooltip').hide();
                }
            ).mousemove(function(e) {
                $('#tooltip').css({
                    top: e.pageY + 20,
                    left: e.pageX + 20
                });
            });
        });
    </script>
</body>
</html>