Bootstrap 4 WordPress站点Tooltip无法正常工作求助

Hey Rasmus，我来帮你一步步排查这个tooltip用不了的问题～

首先你本地遇到的Uncaught TypeError: $ is not a function是核心线索，这是因为WordPress默认会禁用jQuery的$别名，避免和其他脚本冲突，所以直接用$调用jQuery方法会报错。结合这个点，我们来逐个解决：

1. 修复$未定义的问题 #

你可以用两种方式解决这个问题：

• 直接把代码里的$替换成jQuery全称：

  jQuery(function () {
    jQuery('[data-toggle="tooltip"]').tooltip()
  });
  

• 用自执行函数包裹代码，把jQuery以$为参数传进去，这样内部就能正常用$了：

  (function($) {
    $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip();
    });
  })(jQuery);
  

2. 确保脚本加载顺序正确 #

WordPress有严格的脚本加载机制，你的tooltip初始化代码必须在jQuery和Bootstrap Tooltip组件之后执行，否则会找不到tooltip()方法。

推荐用WordPress的wp_enqueue_script函数来加载你的自定义脚本，这样能自动处理依赖关系：

1. 在子主题的functions.php文件里添加以下代码：

   function enqueue_custom_tooltip_script() {
     // 注册并加载自定义tooltip脚本，依赖jQuery和Bootstrap
     wp_enqueue_script(
       'custom-tooltip-script',
       get_stylesheet_directory_uri() . '/js/custom-tooltip.js', // 脚本路径，根据你的实际位置调整
       array('jquery', 'bootstrap'), // 假设主题注册Bootstrap的句柄是'bootstrap'，如果不确定可以看主题的functions.php
       '1.0',
       true // 设为true会把脚本放在页面底部，确保在DOM加载完成后执行
     );
   }
   add_action('wp_enqueue_scripts', 'enqueue_custom_tooltip_script');
   

2. 在子主题的js文件夹下创建custom-tooltip.js，把之前修复好的初始化代码放进去。

3. 检查元素属性是否正确 #

确保你的目标元素有正确的Bootstrap Tooltip属性：

<a href="#" data-toggle="tooltip" title="你的Tooltip内容">Hover over me</a>

注意：data-original-title会被Bootstrap自动从title属性生成，所以直接写title就够了。

4. 排查Bootstrap组件是否加载成功 #

如果上面的方法都没用，打开浏览器控制台（F12），输入jQuery.fn.tooltip并回车：

• 如果返回undefined，说明Bootstrap的Tooltip组件没有被加载。这时候要检查：
  • 主题是否真的包含了Bootstrap的Tooltip部分（有些主题可能只加载了核心组件）
  • 是否有缓存/优化插件（比如Autoptimize）把Bootstrap脚本合并或删除了，可以暂时禁用这类插件测试

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