MDBootstrap Tooltip无控制台报错不显示引入Popper.js仍失效如何解决

架构老林

2026-10-6

问题排查及修正方案

1. 核心错误：jQuery引入标签语法错误

你引入jQuery的script标签未正确闭合，原代码为：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script

末尾缺少>，导致后续JS资源加载解析异常，直接补全闭合即可：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Popper.js版本不匹配

MDB UI Kit 3.9.0依赖的Popper.js版本为2.x系列，你使用的1.10.1版本过低，无法适配MDB的tooltip组件，替换为适配版本即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js" crossorigin="anonymous"></script>

3. 组件冲突问题

jQuery UI内置了同名的tooltip组件，会和MDB的tooltip产生命名/行为冲突，有两种解决方式：

如果不需要使用jQuery UI的tooltip功能，可在引入jQuery UI后添加代码销毁其tooltip注册：
```
$.widget.bridge('tooltip', $.noop);
```
或者优先保证MDB的tooltip在jQuery UI之后初始化即可。

4. 初始化执行时机问题

如果你的JS初始化代码写在<body>头部、DOM元素渲染之前执行，会导致document.getElementById('warningIcon')拿到空值，需要把初始化代码放在DOM加载完成后执行：

// 原生JS写法
document.addEventListener('DOMContentLoaded', function() {
  const warningIcon = document.getElementById('warningIcon')
  const tooltip = new mdb.Tooltip(warningIcon, {
      title: 'generated warning message'
  });
  tooltip.show()
})

// jQuery写法
$(function() {
  const warningIcon = document.getElementById('warningIcon')
  const tooltip = new mdb.Tooltip(warningIcon, {
      title: 'generated warning message'
  });
  tooltip.show()
})