检查Chrome浏览器中的hover元素？
我正在尝试通过Chrome的开发人员工具查看工具提示在网站上的结构。 然而，即使当我在项目上盘旋时，当我“检查元素”，什么也没有显示在html中的工具提示。 我知道我可以将样式设置为:hover ，但我仍然无法看到工具提示的HTML或CSS。
有任何想法吗？
我实际上find了一个与Twitter Bootstrap工具提示相关的技巧。 如果您在另一个显示器上打开开发工具（F12），将鼠标hover在元素上以显示工具提示，右键单击，如同select“检查元素”。 将该上下文菜单保持打开状态，将焦点移至开发工具。 工具提示的html应该显示在HTML元素旁边的工具提示中。 那么你可以把它看作是另一个元素。 如果你回到Chrome的HTML消失，所以只是要注意的东西。
一种奇怪的方式，但它为我工作，所以我想我会分享它。
您只需强制显示工具提示即可
$('.myelement').tooltip('open');
现在，无论hover状态如何，工具提示都会显示。
向下滚动到DOM的底部，您应该看到标记。
更新请参阅cneuro对Bootstrap 3的评论。
$('.myelement').tooltip('show');
更新请参阅MarkoGrešak对Chrome的回答， $0可用作当前选定元素的快捷方式。 这似乎也在Safari中工作。
$($0).tooltip('show')
这个解决scheme没有任何额外的代码。
点击command-option-j打开控制台。 点击控制台右上angular的窗口button，在另一个窗口中打开控制台。
然后，在Chrome窗口中，将鼠标hover在触发popup窗口的元素上，然后点击command-`但是多次需要关注控制台，然后键入debugger 。 这将冻结页面，然后您可以检查元素选项卡中的元素。
F8会暂停debugging。
将鼠标hover在工具提示上，并在显示时按F8键。
您现在可以使用检查器来查看CSS。
对我来说，接受的答案是行不通的：单击DevTools立即closures工具提示。
但是，我发现https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution帮助我：;
- 在控制台中，运行：
window.addEventListener('keydown', function(e) { if (e.keyCode == 123) debugger; }); -
使用检查器高亮显示元素
-
打F12
您现在可以检查元素，并将JavaScript暂停，以便DOM不会更改。
我有这个问题，所以我去了文档，并检查已经在页面上呈现的工具提示。 这帮助我看到了工具提示的dom结构并相应地编辑它。
这里有一个简单的解决scheme：如果你有dynamic工具提示，你可以通过（暂时）改变触发事件来click来使它们“持久”。 这将有一个效果，工具提示只消失在一个点击：
$('body').tooltip({ selector: "[data-toggle='tooltip']", trigger: "click" });
这样，使用FF或Chrome的debugging工具就可以轻松进行检查。
值得注意的是，在开发工具中切换hover状态只有在通过CSS启用提示文本时才会产生影响：首先hover规则。 切换仅将hover状态应用于元素以进行呈现，但不会触发相应的JavaScript鼠标hover事件。
当目标元素hover时，许多框架（如AngularJS）通过JavaScriptdynamic地将工具提示HTML附加到文档主体的底部，因此任何数量的hover和检查目标元素都无济于事。
@ joeyyang的答案在这种情况下对我很好。
在Linux上的Chome中，可以通过执行以下操作来实现JS生成的工具提示，例如WikiPedia上引用的工具提示：
如上所述，使用F12打开开发工具。 在另一个窗口中打开它们。 突出显示工具提示，然后单击Ctrl-Shift-C（HTML检查器）。 当您移动提示时，开发窗口将显示相应的部分。
如果在鼠标hover的时候需要保持打开状态，可以在其他窗口中更彻底地检查它，然后右键单击工具提示并保持上下文菜单，然后单击开发工具窗口。 在这种情况下，它将在维基百科窗口中留下提示。
在一定程度上它也适用于引导技巧。
出于某种原因，这里提供的答案在Windows上不适用于我。 我可以通过打开开发工具来检查工具提示，然后将鼠标hover在提示工具提示的元素上，然后右键单击该元素（而不是工具提示）。 然后，将光标移到检查器面板上并向下滚动到底部。 工具提示元素应该仍然在那里。
