在WordPress中集成Tooltipster遇阻：Tooltip正常弹出但内容为空

看起来你遇到的问题很典型——Tooltipster在静态环境正常工作，但到了WordPress里弹窗能弹出却没内容，大概率是WP的脚本加载机制、DOM处理或者内容过滤在搞鬼。结合你提到的几个配置环节，我给你梳理几个排查方向：

1. 先确认脚本与样式的加载顺序（对应functions.php配置） #

WordPress默认是jQuery的noConflict模式，而且脚本加载有优先级，Tooltipster依赖jQuery，所以必须确保它在jQuery之后加载。不要直接在header里硬写script标签，用WP的队列系统更稳妥：

// 在functions.php中添加
function enqueue_tooltipster_assets() {
    // 加载Tooltipster样式
    wp_enqueue_style(
        'tooltipster-css',
        get_template_directory_uri() . '/assets/css/tooltipster.bundle.min.css',
        array(),
        '4.2.8', // 替换成你用的版本号
        'all'
    );
    // 加载Tooltipster脚本，依赖jQuery
    wp_enqueue_script(
        'tooltipster-js',
        get_template_directory_uri() . '/assets/js/tooltipster.min.js',
        array('jquery'), // 关键：指定依赖jQuery
        '4.2.8',
        true // 放在footer加载，优化性能同时避免DOM未加载完成的问题
    );
}
add_action('wp_enqueue_scripts', 'enqueue_tooltipster_assets');

如果之前是直接在header.php里写的script，改成上面的方式，避免冲突。

2. 修正Tooltip初始化的时机与写法（对应header.php的初始化代码） #

WP里不能直接用$调用jQuery，而且要确保DOM完全加载后再初始化Tooltipster。正确的初始化代码应该是：

// 在header.php的</head>前或者用wp_add_inline_script添加
jQuery(document).ready(function($) {
    // 这里用$没问题，因为已经把jQuery传进回调函数了
    $('.tooltip-trigger').tooltipster({
        // 如果是用隐藏容器存内容，确保选择器正确
        // content: $('.tooltip-content'),
        // 更稳妥的方式是用data属性存内容，避免DOM被过滤
        content: function() {
            return $(this).attr('data-tooltip-content');
        },
        contentAsHTML: true, // 如果内容是HTML，必须开这个
        // 其他配置项比如theme、animation等
    });
});

如果之前的初始化代码没包裹在$(document).ready()里，或者直接用了$，很可能导致初始化时DOM还没加载，找不到内容容器。

3. 检查Tooltip内容的DOM是否被WordPress过滤（对应主题中的Tooltip位置与内容） #

WordPress会自动给内容添加<p>标签、过滤HTML，这很可能把你隐藏的Tooltip内容容器搞乱。比如你原本写的：

<span class="tooltip-trigger">Hover me</span>
<div class="tooltip-content" style="display:none;">这里是Tooltip内容</div>

可能被WP转成：

<p><span class="tooltip-trigger">Hover me</span></p>
<p><div class="tooltip-content" style="display:none;">这里是Tooltip内容</div></p>

导致Tooltipster找不到.tooltip-content。解决办法有两个：

• 用data属性存储内容（推荐）：

  <span class="tooltip-trigger" data-tooltip-content="<strong>加粗内容</strong> 普通文本">Hover me</span>
  

  配合上面初始化代码里的content: function() { return $(this).attr('data-tooltip-content'); }和contentAsHTML: true，完全避开DOM过滤问题。
• 禁用特定区域的自动格式化：
  如果一定要用隐藏容器，在functions.php里禁用对应内容的自动p标签：

  // 禁用文章内容的自动p标签（谨慎使用，会影响全局）
  remove_filter('the_content', 'wpautop');
  // 或者针对短代码区域禁用，比如你用了[tooltip]短代码的话
  add_filter('the_content', 'wpautop', 9);
  add_filter('the_content', 'shortcode_unautop', 10);
  

4. 排查动态内容的转义问题（对应主题中本该显示的内容） #

如果Tooltip内容是来自自定义字段、文章元数据等动态内容，WP的转义函数可能把内容清空或者转义。比如你如果用了：

echo esc_html(get_post_meta(get_the_ID(), 'tooltip_text', true));

esc_html会把所有HTML转成实体，甚至如果内容里有特殊字符可能被过滤。改成允许安全HTML的函数：

echo wp_kses_post(get_post_meta(get_the_ID(), 'tooltip_text', true));

这样既能保留HTML，又符合WP的安全规范。

最后一步：浏览器控制台排查 #

打开浏览器F12控制台，看两个地方：

• Console标签：有没有JS错误？比如Tooltipster is not defined说明脚本没加载，或者Cannot read property 'tooltipster' of undefined说明选择器没找到元素。
• Network标签：检查Tooltipster的CSS和JS是否成功加载，有没有404错误（路径写错了）。

按这些步骤排查，应该能解决弹窗内容为空的问题。

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