使用Watir获取Figma插件页面隐藏Tooltip的标题

先判断Tooltip的实现方式（JS/CSS） #

Figma的这个Tooltip常见两种实现逻辑，你可以手动排查：

• CSS伪元素实现：检查安装量元素（.feed_page--pluginInstallCount--Db8kn）的CSS属性，看是否有::before或::after伪元素，且设置了content值（可能来自元素的title属性或data-*属性）。
• JS动态生成DOM：hover元素后，在浏览器开发者工具的Elements面板里，搜索带tooltip、popup、hint关键词的新增DOM节点，这类节点通常是JS在hover时插入的。

获取Tooltip标题的具体方案 #

方案1：CSS伪元素实现的情况 #

如果Tooltip是通过伪元素渲染的，直接获取伪元素的content值即可（注意content会带引号，需要处理）：

installs_element = browser.div(class: 'feed_page--pluginInstallCount--Db8kn')
installs_element.hover
# 获取:before伪元素的content内容，去除引号
tooltip_content = installs_element.style(':before', 'content').gsub(/["']/, '')

方案2：JS动态生成DOM的情况 #

如果是JS生成独立Tooltip元素，hover后等待元素出现，再定位获取文本：

installs_element = browser.div(class: 'feed_page--pluginInstallCount--Db8kn')
installs_element.hover
# 等待Tooltip出现，用正则匹配类名（根据实际元素调整）
tooltip = browser.div(class: /tooltip/).wait_until(&:present?)
tooltip_title = tooltip.text.strip

排查小技巧 #

1. 手动hover安装量元素，打开开发者工具的Elements面板，按Ctrl+F输入tooltip快速定位可能的元素。
2. 查看安装量元素的属性，比如是否有data-tooltip、title这类存储Tooltip内容的属性，有些实现会直接把内容存在这些属性里，不需要等hover就能获取。

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