WordPress站点Shortcodes Ultimate插件tooltip被浏览器拦截如何解决

触发拦截的核心原因 #

Shortcodes Ultimate插件默认生成的tooltip相关前端资源（JS/CSS）如果从第三方CDN加载，会被浏览器跟踪保护识别为跨站跟踪类资源拦截；或是插件的脚本特征、默认类名被跟踪保护的通用规则命中，导致组件失效。

可落地的解决方案 #

• 优先使用纯CSS实现tooltip（完全规避拦截）
  完全不依赖插件的shortcode，用原生HTML+CSS实现相同效果，没有额外JS逻辑，不会被任何跟踪保护规则拦截，替换代码如下：
  1. 替换原有shortcode部分的HTML代码：

  <figure class="wp-block-image size-full is-resized img-filter parallax-element parallax-wrap custom-tooltip">
      <span class="tooltip-text">UI designer</span>
      <a href="https://www.linkedin.com/in/ashish-yadav/" target="_blank" rel="noopener">
          <img src="https://vedsarkar.com/wp-content/uploads/2019/11/Ashish.png" alt="" class="wp-image-3438" width="55" height="55">
      </a>
  </figure>
  

  2. 将以下CSS规则添加到WordPress后台「外观」-「自定义」-「额外CSS」中即可生效：

  /* 自定义tooltip容器 */
  .custom-tooltip {
    position: relative;
  }
  /* tooltip文字样式 */
  .custom-tooltip .tooltip-text {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    position: absolute;
    z-index: 999;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  /*  hover显示逻辑 */
  .custom-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
  

• 如果要继续使用Shortcodes Ultimate插件的tooltip功能
  进入WordPress后台「Shortcodes Ultimate」设置页，找到「资源加载」相关选项，关闭「使用公共CDN加载前端资源」的开关，让所有插件的CSS/JS从你自己的站点域名加载，避免跨站资源被拦截；同时给su_tooltip短代码添加class="custom-tip"自定义类参数，避开插件默认类名被规则命中。
• 排查额外的统计跟踪代码
  检查你的站点是否给该图片/链接绑定了点击统计事件，这类跟踪代码被拦截时会连带绑定的交互组件一起失效，移除对应元素的跟踪埋点即可恢复。

内容的提问来源于stack exchange，提问作者Ved Sarkar