如何隐藏YouTube嵌入视频上方的TippyJS提示框可见性？

我的网站已启用TippyJS提示框，但希望仅隐藏YouTube嵌入视频上方显示的提示框。通过网页检查，发现鼠标悬停YouTube视频时出现的提示框代码如下：

<div data-tippy-root id="tippy-8" style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(712px, -688.8px, 0px);"> </div>

YouTube视频的嵌入代码：

<div class="video">
 <iframe width="700" height="524" id="youtube_iframe" src="LINK HERE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="height: 446.897px;" aria-describedby="tippy-23">
</div>

我尝试过以下CSS代码，但因为tippy-后的数字是随机变化的，无法永久生效；用[data-tippy-root]或[id^=tippy]又会隐藏所有提示框：

#tippy-9, #tippy-8 {
    display: none !important;}
#data-tippy-root {
    display: none !important;
    visibility: none !important;}

现在需要实现仅隐藏YouTube视频上方的TippyJS提示框，该如何操作？

解决方案 #

方法1：初始化Tippy时添加自定义类 #

如果是你自己编写的Tippy初始化代码，可以在绑定YouTube视频元素时，给对应的提示框添加专属类，再用CSS隐藏：

// 定位所有YouTube视频容器
const videoContainers = document.querySelectorAll('.video');

videoContainers.forEach(container => {
  tippy(container, {
    // 保留你的其他配置项
    onCreate(instance) {
      // 给提示框根元素加自定义类
      instance.popper.classList.add('tippy-for-youtube');
    }
  });
});

对应的CSS：

.tippy-for-youtube {
    display: none !important;
}

方法2：通过aria-describedby关联定位（JS监听） #

从你的代码能看到，YouTube的iframe带有aria-describedby属性，值就是对应提示框的ID。可以监听Tippy的创建事件，精准识别并隐藏视频对应的提示框：

// 监听Tippy实例创建事件
document.addEventListener('tippy.created', function(e) {
  const tippyInstance = e.detail;
  // 检查触发提示框的元素是否是视频容器或iframe
  const targetIsYoutube = tippyInstance.reference.closest('.video') || tippyInstance.reference.id === 'youtube_iframe';
  
  if (targetIsYoutube) {
    // 直接隐藏提示框，或者用instance.disable()彻底禁用
    tippyInstance.popper.style.display = 'none';
  }
});

方法3：针对空内容提示框的CSS（限特定场景） #

如果只有YouTube视频的提示框是空的（从你提供的代码看确实是空的），可以用这个CSS快速解决，但要注意如果其他提示框也为空会被误隐藏：

[data-tippy-root]:empty {
    display: none !important;
}

内容的提问来源于stack exchange，提问作者online-user