为jQuery-Seat-Charts添加座位悬浮提示框（Tooltip）

我正在使用mateuszmarkowski的jQuery-Seat-Charts插件，尝试实现座位悬浮时显示提示框，但操作起来有困难。我希望在座位获得焦点时激活提示框（Tooltip）。

具体实现方案 #

可以借助插件自带的focus和blur事件，结合Tooltip组件（原生自定义或jQuery UI Tooltip）来完成需求，以下是实操代码示例：

1. 初始化座位图表并绑定事件

// 初始化座位图
var seatChart = $('#seat-container').seatCharts({
    map: [
        'aaaaa',
        'aaaaa',
        'bbbbb',
        'bbbbb',
        'ccccc'
    ],
    seats: {
        a: {
            price: 120,
            category: 'VIP区',
            classes: 'vip-seat'
        },
        b: {
            price: 80,
            category: '普通区',
            classes: 'normal-seat'
        },
        c: {
            price: 50,
            category: '特惠区',
            classes: 'discount-seat'
        }
    },
    // 座位获得焦点时触发
    focus: function() {
        // 自定义Tooltip示例，也可替换为jQuery UI Tooltip
        var tooltipHtml = `<div class="seat-tooltip">
            <p>座位类型：${this.settings.category}</p>
            <p>票价：¥${this.settings.price}</p>
        </div>`;
        // 将Tooltip插入页面并定位到座位旁
        $(tooltipHtml).appendTo('body').css({
            position: 'absolute',
            top: $(this.node).offset().top - 40,
            left: $(this.node).offset().left,
            background: '#333',
            color: '#fff',
            padding: '8px 12px',
            borderRadius: '4px',
            zIndex: 9999
        });
    },
    // 座位失去焦点时触发
    blur: function() {
        // 移除自定义Tooltip
        $('.seat-tooltip').remove();
    }
});

2. 注意事项

• 若使用jQuery UI Tooltip，需提前引入对应依赖文件，替换focus和blur内的代码为Tooltip的初始化与关闭逻辑即可
• 自定义Tooltip时可根据需求调整样式和定位方式，适配不同页面布局

内容的提问来源于stack exchange，提问作者Abdulaziz Gossage