phpMyAdmin 的 tooltip 样式不由专属 CSS 文件控制，而是受限于浏览器对原生 title 属性的强制渲染；真正影响显示的是 themes/pmahomme/css/common.css 中的 [title] 重置规则和 js/functions.js 动态插入的临时样式，但 Chrome/Edge 等现代浏览器完全忽略此类 CSS 自定义。
phpMyAdmin 的 tooltip 样式由哪几个 CSS 文件控制？
phpMyAdmin 的悬浮提示框（tooltip）不是用 JavaScript 动态生成的独立组件，而是依赖浏览器原生的 title 属性 + 少量内联样式。它本身不提供可直接覆盖的 tooltip 专属 CSS 类。真正影响显示效果的是两个地方：themes/pmahomme/css/common.css 中对 [title] 的基础样式重置，以及部分版本中 js/functions.js 插入的临时 style 标签。
你改 theme.css 里的 [title] 规则，可能对某些浏览器生效（比如 Firefox 的伪元素模拟），但 Chrome/Edge 完全无视——因为它们强制使用系统级 tooltip，不响应 CSS。
为什么直接修改 CSS 几乎无效？
- Chrome、Edge、Safari 等 Blink/WebKit 内核浏览器禁止通过 CSS 自定义原生
title 提示框，这是安全策略，无法绕过
- phpMyAdmin 没有引入第三方 tooltip 库（如 tippy.js 或 bootstrap-tooltip），所以不存在
.tooltip-inner 这类可定制类名
- 即使你在
common.css 里加了 [title] { font-size: 14px !important; }，实际 hover 时仍显示默认小字号灰色系统框
title 提示框，这是安全策略，无法绕过.tooltip-inner 这类可定制类名common.css 里加了 [title] { font-size: 14px !important; }，实际 hover 时仍显示默认小字号灰色系统框常见错误现象：!important 失效、开发者工具里能看到样式却完全不作用、改完刷新后 tooltip 样式毫无变化。
真正可行的自定义方案：替换 title 属性为 data-* + JS 驱动 tooltip
必须放弃原生 title，改用 data-tooltip 属性 + 轻量 JS 实现。步骤如下：
立即学习“PHP免费学习笔记（深入）”；
- 在 phpMyAdmin 源码中定位到生成表格/按钮的 PHP 模板（如
libraries/classes/Display/Results.php或templates/table/search_fields.twig） - 将
title="xxx"替换为data-tooltip="xxx"（注意保留原有逻辑，别破坏 SQL 字段说明或操作提示） - 在
js/functions.js底部或新建custom-tooltip.js加载点插入以下逻辑：
document.addEventListener('DOMContentLoaded', () => {
document.body.addEventListener('mouseover', (e) => {
const el = e.target.closest('[data-tooltip]');
if (!el || el._tooltipShown) return;
const tip = el.getAttribute('data-tooltip');
const tooltip = document.createElement('div');
tooltip.className = 'custom-pma-tooltip';
tooltip.textContent = tip;
tooltip.style.cssText = 'position: absolute; background: #333; color: #fff; padding: 4px 8px; border-radius: 3px; font-size: 12px; pointer-events: none; z-index: 9999;';
document.body.appendChild(tooltip);
el._tooltipShown = tooltip;
const rect = el.getBoundingClientRect();
tooltip.style.left = `${rect.right + 8}px`;
tooltip.style.top = `${rect.top + window.scrollY}px`;
});
<p>document.body.addEventListener('mouseout', (e) => {
const el = e.target.closest('[data-tooltip]');
if (el && el._tooltipShown) {
el._tooltipShown.remove();
el._tooltipShown = null;
}
});
});</p>- 最后在
common.css添加.custom-pma-tooltip的媒体查询适配（比如@media (prefers-reduced-motion)下禁用位移）
这样做会带来哪些副作用？
- phpMyAdmin 升级时，所有手动修改的 PHP 模板和 JS 文件都会被覆盖，必须重新打补丁
- 某些 AJAX 刷新区域（如“浏览”页切换页码）生成的新 DOM 不会自动绑定事件，需用事件委托或监听
pjax:success 后重绑
- 如果服务器启用了 CSP（Content-Security-Policy），动态插入
style 可能被拦截，得把样式提前写进 CSS 文件并用 class 控制
- 移动端长按触发原生 tooltip，而你的 JS tooltip 不会响应，等于丢失提示功能
pjax:success 后重绑style 可能被拦截，得把样式提前写进 CSS 文件并用 class 控制真正容易被忽略的一点：phpMyAdmin 的 tooltip 很多是服务端动态拼接的（比如字段注释含单引号、换行符），JS 里直接 textContent = tip 是安全的，但若改用 innerHTML 渲染，会引发 XSS。
