使用jQuery UI为Checkbox添加Data属性Tooltip不显示问题排查

你的代码存在几个关键问题导致Tooltip无法正常显示：

1. 选择器语法错误 #

.checktip :checked 中间的空格表示查找.checktip元素内部的被选中元素，但你的复选框本身就带有.checktip类，正确的选择器应该是.checktip:checked（去掉空格）。不过更关键的是，你不需要分开初始化两种状态的Tooltip，应该统一绑定后动态判断状态。

2. this指向错误 #

在Tooltip的content配置中直接写$(this).data("home")时，this并不指向当前的复选框元素——此时上下文是全局作用域（或调用Tooltip的上下文），而非单个DOM元素。必须使用函数返回值的方式，才能让this正确指向当前触发Tooltip的元素。

3. 重复初始化冲突 #

你先给选中状态的复选框初始化Tooltip，又给所有.checktip元素初始化，后者会覆盖前者的配置，导致逻辑混乱。

修正后的代码 #

HTML（保持不变） #

<input class="checktip" data-home="Working from Home" data-office="Working from Office" type="checkbox" name="Monday" id="Monday">

jQuery代码 #

$(".checktip").tooltip({
    classes: { "ui-tooltip": "uitooltip" },
    content: function() {
        // 根据复选框是否选中，返回对应的data属性内容
        return $(this).is(":checked") ? $(this).data("office") : $(this).data("home");
    }
});

额外说明 #

• 当复选框状态切换时，Tooltip会自动根据当前状态更新内容，无需额外绑定change事件。
• 确保你已经正确引入了jQuery和jQuery UI的脚本与样式文件，这是Tooltip能正常工作的前提。

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