如何调试popover？

Question

在这个小提琴http://jsfiddle.net/mjmitche/qVdEy/6/上，您可以看到弹出窗口内文本的对齐是完美的，但是，当我在我的网站上放置完全相同的css / js / html时，文本大于容器！

我正在试图弄清楚使用萤火虫发生了什么，但我必须将光标从弹出窗口移开以使用萤火虫，然后萤火虫消失。我无法弄清楚我的代码中的哪些设置正在改变演示文稿。弹出窗口是使用Twitter Bootstrap.js创建的（你可以看到小提琴中的资源）

Answer 1

没有人真正回答“如何调试popover”这个问题:::只需将popover设置为在加载时打开＆gt;＆gt; $('#element').popover('show')

Answer 2

我所做的有点奇怪，似乎只适用于Chrome，而不是Firebug。 步骤是：

1. 在新窗口中打开Chrome检查器
2. 确保检查员的一部分超出您所在的按钮     试图激活（在后台窗口中
3. 激活浏览器窗口并将鼠标悬停在按钮上（这会激活弹出窗口），现在点击 alt + tab（OSX上的cmd +`）切换到检查器窗口。
4. 这不会触发mouseOut事件并保留弹出窗口 附加到DOM体节点！因为你已经在检查员 你可以导航到它并查看css问题。

Answer 3

在查看popover CSS之后，似乎没有明确定义的font-size：http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css（只需在“popover”上查找并查看CSS）

也许尝试添加以下CSS并从那里调整它：

.popover, .popover h3.title, .popover .content { font-size: 14px; }

希望有所帮助：）

Answer 4

这是我为我的新HTML框可视化工具创建的那种东西。看看吧！

HTML Box Visualizer - GitHub