如何使用纯CSS定位带有ext:qtip属性的Tooltip？

嘿，我明白你的困扰——不能改代码只能靠CSS确实头疼，我来帮你捋捋为什么你之前的尝试没生效，以及正确的解决办法：

先说说你之前的选择器为啥没用： #

• [ext:qtip]：这个选择器选中的是那个带有ext:qtip属性的<img>标签本身，不是弹出的tooltip弹窗，所以隐藏它只会把小图片藏起来，完全碰不到tooltip。
• ext：根本不存在<ext>这种HTML标签，这个选择器自然无效。
• #tip-image：你tooltip里的是class='tip-image'（类选择器），不是id，而且这个<div>是动态生成到DOM里的，不是直接写在img的属性里，就算你写成.tip-image，也得确保能命中动态生成的元素，还要注意样式优先级。
• #bigtooltip：同样，这是类（ext:qclass="bigtooltip"）不是id，应该用.bigtooltip，而且这个类是加到tooltip的容器上，不是img标签上的。

正确的CSS解决方案： #

因为你给img加了ext:qclass="bigtooltip"，ExtJS的qtip组件会把这个类直接应用到生成的tooltip弹窗容器上，所以直接针对这个类写样式就行，记得加!important来覆盖组件自带的默认样式：

/* 直接隐藏整个tooltip */
.bigtooltip {
  display: none !important;
  /* 或者用 visibility: hidden !important; 区别是display会完全移除元素，visibility只是隐藏但占位置 */
}

如果这个类不够精准，还可以结合ExtJS tooltip的默认类（比如x-tip，不同版本可能略有不同）来缩小范围：

.x-tip.bigtooltip {
  visibility: hidden !important;
}

另外，如果你只想隐藏tooltip里的大图，也可以直接定位那个动态生成的.tip-image类：

.bigtooltip .tip-image {
  display: none !important;
}

额外提示： #

如果上述选择器还是没生效，你可以打开浏览器的开发者工具（F12），手动触发tooltip弹出，然后在Elements面板里找到tooltip的DOM元素，看看它实际带的类和属性，再针对性写选择器——这是最稳妥的办法，毕竟不同版本的ExtJS生成的tooltip结构可能略有差异。

备注：内容来源于stack exchange，提问作者CreeDorofl