jQuery Tooltip悬停不显示问题求助

AI 小北

2026-7-24

解决jQuery Tooltip不生效的问题

排查步骤及解决方案

1. 确认依赖是否正确引入

Tooltip是jQuery UI的组件，并非原生jQuery自带功能，必须同时引入正确顺序的依赖：

<!-- 先引入jQuery核心库 -->
<script src="jquery.min.js"></script>
<!-- 再引入jQuery UI库 -->
<script src="jquery-ui.min.js"></script>
<!-- 建议引入jQuery UI的默认样式，避免Tooltip显示异常 -->
<link rel="stylesheet" href="jquery-ui.min.css">

打开浏览器控制台，检查是否存在$ is not defined或$(...).tooltip is not a function类错误，这类提示直接指向依赖加载问题。

2. 确保代码在DOM就绪后执行

必须等待页面DOM加载完成再初始化Tooltip，两种常用写法：

// 写法1：标准DOM就绪写法
$(document).ready(function() {
  // 针对所有img元素初始化
  $('img').tooltip();
  // 或者全局启用Tooltip
  // $(document).tooltip();
});

// 写法2：简写形式
$(function() {
  $('img').tooltip();
});

避免直接在<head>标签内裸写初始化代码，此时DOM元素还未加载完成，无法绑定事件。

3. 检查img元素的title属性

确保目标img标签带有非空的title属性，示例：

<img src="demo.jpg" title="这是图片的提示文本" alt="演示图片">

如果title属性为空、被其他脚本清空，或未添加该属性，Tooltip不会触发。

4. 排查样式与脚本冲突

打开浏览器开发者工具，查看.ui-tooltip元素的样式，确认是否被自定义CSS设置为display: none、透明度为0，或颜色与背景色一致导致“看不见”；
若页面引入了Zepto等其他JS库，可能会和jQuery的$变量冲突，尝试改用jQuery代替$测试：
```
jQuery(function() {
  jQuery('img').tooltip();
});
```
暂时禁用页面内其他自定义tooltip相关脚本，排查是否存在功能冲突。