Html 检查镀铬的悬停元件？

我试图通过Chrome的开发者工具来查看网站上工具提示的结构。但是，即使当我将鼠标悬停在项目上时，当我“检查元素”时，html中的工具提示也不会显示任何内容。我知道我可以将样式设置为

：hover

，但我仍然看不到工具提示的html或css

---

有什么想法吗？

我实际上发现了一个技巧，可以通过Twitter引导工具提示实现这一点。如果在另一个监视器上打开开发工具（F12），然后将鼠标悬停在该元素上以显示工具提示，则右键单击，就像要选择“检查元素”一样。保持上下文菜单打开，将焦点移到开发工具上。工具提示的html应该显示在html中工具提示的元素旁边。然后，您可以将其视为另一个元素。如果你回到Chrome浏览器，HTML就会消失，这只是需要注意的事情

---

有点奇怪，但它对我有效，所以我想我会分享它。

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

然而，我发现这对我很有帮助：

在控制台中，运行：

使用检查器高亮显示元素

击中F12

---

现在，您可以检查元素，暂停JavaScript，这样DOM就不会更改。

您只需要强制工具提示这样显示即可

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

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

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

更新参见cneuro对Bootstrap 3的评论

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

更新参见Marko Grešak对Chrome和Safari的回答，

$0

可以用作当前选定元素的快捷方式。这似乎也适用于Safari

$($0).tooltip('show')

---

此解决方案无需任何额外代码即可工作。

---

点击

command-option-j

打开控制台。单击控制台右上角的窗口查看按钮，在其他窗口中打开控制台

---

然后，在Chrome窗口中，将鼠标悬停在触发popover的元素上，点击

命令-`

，不管您需要多少次关注控制台，然后键入

调试器

。这将冻结页面，然后您可以在“元素”选项卡中检查元素

我在这方面遇到了问题，所以我去检查了页面上已经呈现的工具提示。这有助于我查看工具提示的dom结构，并对其进行相应的编辑。

这里有一个简单的解决方案：如果您有动态工具提示，可以通过（临时）将触发器事件更改为

单击
，使其“持久化”。这将导致工具提示仅在单击时消失：

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

通过这种方式，可以使用FF或Chrome的调试工具轻松检查。F8将暂停调试

在Mac上，您可能需要打开开发人员工具的“源”选项卡

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

现在，您可以使用inspector查看CSS。
值得注意的是，仅当提示文本首先通过CSS:hover规则启用时，才可以在开发工具中切换：hover状态。切换仅将悬停状态应用于元素以进行渲染，但不会触发相应的JavaScript鼠标悬停事件

当目标元素悬停时，许多框架（如AngularJS）都会通过JavaScript将工具提示HTML动态地附加到文档体的底部，因此任何数量的悬停和检查目标元素都无济于事

@Joey Yang的回答在这个场景中对我来说非常有效。
在Chome on Linux中，可以通过执行以下操作来实现JS生成的工具提示，例如维基百科上的参考提示：

如上所述，使用F12打开开发工具。在另一个窗口打开它们。
高亮显示工具提示并单击Ctrl-Shift-C（HTML检查器）。当您在提示上移动时，dev窗口将显示相应的部分

如果您需要在鼠标离开提示时将其保持打开状态，以便能够在另一个窗口中更彻底地检查它，那么右键单击工具提示并保持上下文菜单处于打开状态，然后单击“开发工具”窗口。在这种情况下，它会在wikipedia窗口中保留提示

在某种程度上，它也适用于引导提示。
由于某些原因，这里提供的答案在Windows上对我不起作用。我可以通过打开dev工具来检查工具提示，然后将鼠标悬停在显示工具提示的元素上，然后右键单击该元素（而不是工具提示）。然后，将光标移到inspector面板上并向下滚动到底部。工具提示元素应该仍然存在。
JS激活的工具提示没有代码解决方案：

使用Chrome的devtools检查工具提示的包含/父元素。在“元素”选项卡中，右键单击该容器DOM元素，然后选择“断开”>“子树修改”。下次将鼠标悬停在工具提示所在的DOM部分时，JS代码将暂停，以便您检查工具提示的内容
 1）单击F12打开检查窗口

2） 转到“源”选项卡（控制台旁边）

3） 现在将鼠标悬停在要检查的元素上，并将鼠标放在那里

4） 使用键盘（Tab或shift+Tab）将控件移动到暂停按钮或F8

5） 当键盘焦点在播放按钮上时。按回车键。你的悬停元素将被冻结。你现在可以做任何事情了，无需编码，只需一个窗口回答

没有一个答案是完全正确的，或者有足够的细节，所以这里是我的尝试


使用F12/Ctrl+Shift+I（Windows/Linux）或Command+Option+I（Mac）打开Chrome的开发工具
在DevTools窗口中选择Sources选项卡
使用鼠标将光标悬停在要检查的图元上，使工具提示可见
按F8键（Windows/li
$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

window.onkeydown = () => { debugger }