我正在尝试通过 Chrome 的开发人员工具查看工具提示在网站上的结构。但是，即使我将鼠标悬停在项目上，当我“检查元素”时，html 中的工具提示也不会显示任何内容。我知道我可以将样式设置为:hover，但我仍然看不到工具提示的 html 或 css。
有什么想法吗？
【问题讨论】：
标签： html css hover google-chrome-devtools
F8 将暂停调试。
在 Mac 上，您可能需要打开开发人员工具的“来源”选项卡。
将鼠标悬停在工具提示上，并在显示时按 F8。
您现在可以使用检查器查看 CSS。
【讨论】：
我实际上发现了一个使用 Twitter Bootstrap 工具提示的技巧。如果您在另一台监视器上打开开发工具 (F12)，然后将鼠标悬停在元素上以显示工具提示，右键单击就像选择“检查元素”一样。保持该上下文菜单打开，将焦点移到开发工具上。工具提示的 html 应该显示在元素旁边，它是 HTML 中的工具提示。然后您可以将其视为另一个元素。如果您返回 Chrome，HTML 就会消失，所以需要注意一些事项。
有点奇怪，但它对我有用，所以我想我会分享它。
【讨论】：
此解决方案无需任何额外代码即可工作。
点击command-option-j 打开控制台。点击控制台右上角的视窗按钮，在不同的窗口中打开控制台。
然后，在 Chrome 窗口中，将鼠标悬停在触发弹出窗口的元素上，点击command-`，但您需要多次关注控制台，然后输入debugger。这将冻结页面，然后您可以检查元素选项卡中的元素。
【讨论】：
debugger 写入控制台时失去焦点，您可以在将鼠标悬停在元素上时按下alt+tab。它适用于 Windows 上的 Chromium 应用程序。
您只需要强制显示工具提示
$('.myelement').tooltip('open');
现在无论悬停状态如何，工具提示都会显示。
在 DOM 底部附近向下滚动，您应该会在此处看到标记。
更新见 cneuro 对 Bootstrap 3 的评论。
$('.myelement').tooltip('show');
更新请参阅 Marko Grešak 对 Chrome 和显然 Safari 的回答，$0 可用作当前选定元素的快捷方式。这似乎也适用于 Safari。
$($0).tooltip('show')
【讨论】：
.tooltip('show') getbootstrap.com/javascript/#tooltips-methods
$0 的形式访问。因此，您可以选择触发工具提示的元素并运行$($0).tooltip('show')。
单击f12 进入控制台选项卡并添加以下内容：
setTimeout(()=> {debugger},5000)
这会给你 5 秒的时间来做你想做的任何事情，它会在5 seconds 中断。然后你可以检查目标元素
（例如，悬停元素并等待 5 秒然后检查..）
【讨论】：
对我来说，接受的答案不起作用：单击 DevTools 会立即关闭工具提示。
但是，我发现 https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution 对我有帮助：
const F12 = 123
window.addEventListener('keydown', function(event) {
if (event.keyCode === F12 ) {
debugger;
}
});
使用检查器突出显示元素
按 F12
您现在可以检查元素，暂停 JavaScript，因此 DOM 不会改变。
【讨论】：
单窗口答案，无需编码
其他答案都不是很正确，或者没有足够的细节，所以这是我的尝试。
<body> 中的最后一个 <div>
【讨论】：
JS激活工具提示无代码解决方案：
使用 Chrome 的 devtools 检查工具提示的包含/父元素。在“元素”选项卡中，右键单击该容器 DOM 元素，然后选择“中断”>“子树修改”。下次您将鼠标悬停在工具提示所在的 DOM 部分上时，JS 代码将暂停，以便您检查工具提示的内容。
【讨论】：
按照这些步骤进行
在 chrome 中打开 Inspect 窗口。
将鼠标放在工具提示上。
按 F8
JS 执行将暂停，然后您可以检查工具提示。
再次按F8开始执行，按F10进行调试。
【讨论】：
将鼠标悬停在元素上，长按F8，将暂停脚本执行。
【讨论】：
1)点击 F12 打开 Inspect 窗口
2)转到源选项卡（控制台旁边）
3)现在将鼠标悬停在要检查的元素上并将鼠标悬停在那里。
4）使用键盘（Tab 或 shift+tab）将控件移动到暂停按钮或 F8Refer the image
5)当键盘焦点在播放按钮上时。点击进入。你的悬停元素将被冻结你现在可以做任何事情
【讨论】：
这是我在 Mac 上的做法：
Cmd+Shift+P 为我工作。Disable JavaScript，然后按Enter
这将防止所有使用 JavaScript 的工具提示消失。
【讨论】：
这里有一个简单的解决方案：如果您有动态工具提示，您可以通过（临时）将触发事件更改为 click 使它们“持久化”。这将产生工具提示仅在点击时消失的效果：
$('body').tooltip({
selector: "[data-toggle='tooltip']",
trigger: "click"
});
这样，可以很容易地使用 FF 或 Chrome 的调试工具对其进行检查。
【讨论】：
只需在控制台中点击一行脚本，然后按任意键即可进入调试模式。
window.onkeydown = () => { debugger }
【讨论】：
我遇到了这个问题，所以我去了to the documentation 并检查了页面上已经呈现的工具提示。这有助于我查看工具提示的 dom 结构并进行相应的编辑。
【讨论】：
在 Linux 上的 Chome 中，可以通过执行以下操作来实现 JS 生成的工具提示，例如维基百科上的参考：
如上所述，使用 F12 打开开发工具。在另一个窗口中打开它们。 突出显示工具提示并单击 Ctrl-Shift-C（HTML 检查器）。当您移过提示时，开发窗口将显示相应的部分。
如果您需要在鼠标移开时保持提示打开，以便能够在另一个窗口中更彻底地检查它，请右键单击工具提示并保留上下文菜单，然后单击开发工具窗户。在这种情况下，它会将提示留在维基百科窗口中。
在某种程度上，它也适用于引导提示。
【讨论】：
由于某种原因，此处提供的答案在 Windows 上不适用于我。我可以通过打开开发工具来检查工具提示，然后将鼠标悬停在显示工具提示的元素上，然后右键单击该元素（不是工具提示）。然后，将光标移到检查器面板并向下滚动到底部。工具提示元素应该仍然存在。
【讨论】：
我为这个问题找到的另一个解决方案。通过 Chrome 中的移动设备或平板电脑视图 在 Chrome 开发工具中按 Crt + Shift + M 以在 Chrome 中查看移动视图。 在 ToolTip div 上单击（Tap），您可以使用 Right Click 在工具提示上检查它
【讨论】：
点击command-option-j 打开控制台。点击控制台右上角的视窗按钮，在不同的窗口中打开控制台。
然后，在 Chrome 窗口中，将鼠标悬停在触发弹出窗口的元素上，点击command-，但您需要多次关注控制台，然后输入debugger。那会冻结页面；然后您可以在“元素”选项卡中检查该元素。
【讨论】：
【讨论】：
值得注意的是，只有在首先通过 CSS :hover 规则启用提示文本时，从开发工具中切换 :hover 状态才会产生影响。切换仅将悬停状态应用于元素以进行渲染，但不会触发相应的 JavaScript 鼠标悬停事件。
当目标元素悬停时，许多框架（例如 AngularJS）通过 JavaScript 将工具提示 HTML 动态附加到文档正文的底部，因此任何数量的悬停和检查目标元素都无济于事。
@joeyyang 的回答在这种情况下对我来说效果很好。
【讨论】：
我发现的最简单的方法之一是：
在侧面打开 Chrome 开发工具
将鼠标悬停在元素上
右击
点击开发工具
现在您可以检查和更改样式
【讨论】：