问题描述

我试图通过 Chrome 的开发者工具来查看工具提示是如何在网站上构建的。但是，即使我被悬停在该项目上，当我”inspect element”，没有显示为 html 中的工具提示。我知道我可以将样式设置为:hover，但是我仍然看不到工具提示的 html 或 css 。

有任何想法吗？

最佳解决办法

我实际上发现了一个技巧，使用 Twitter Bootstrap 工具提示。如果您在另一台显示器上打开开发工具 (F12)，则将鼠标悬停在该元素上以显示工具提示，右键单击，如同您选择’Inspect Element’ 一样。让这个上下文菜单打开，将重点放在开发工具上。该工具提示的 html 应该显示在元素旁边，它的 HTML 工具提示。那么你可以看看它就像是另一个元素。如果你回到 Chrome，HTML 就会消失，所以只需要注意一下。

一种奇怪的方式，但它为我工作，所以我想我会分享它。

次佳解决办法

您只需要强制显示工具提示

$('.myelement').tooltip('open');

现在，无论悬停状态如何，工具提示将显示。

在 DOM 底部附近向下滚动，您应该看到标记。

更新请参阅 cneuro 对 Bootstrap 3 的评论。

$('.myelement').tooltip('show');

第三种解决办法

该解决方案无需任何额外的代码。

打 command-option-j 打开控制台。单击控制台右上角的 window-looking 按钮，在不同的窗口中打开控制台。

然后，在 Chrome 窗口中，将鼠标悬停在触发弹出窗口的元素上，然后多次按 command-`，然后键入控制台，然后键入 debugger 。这将冻结页面，然后您可以检查元素选项卡中的元素。

第四种办法

F8 将暂停调试。

鼠标悬停在工具提示上，并在显示时按 F8 。

您现在可以使用检查器来查看 CSS 。

第五种办法

对我来说，接受的答案没有起作用：点击 DevTools 立即关闭工具提示。

但是，我发现 https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution 帮助了我：

  1. 在控制台:, 运行：
    window.addEventListener('keydown', function(e) {
    if (e.keyCode == 123) debugger;
    });

  2. 用检查器突出显示元素

  3. 击中 F12

您现在可以检查元素，JavaScript 已暂停，因此 DOM 不会更改。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。