Firefox和Firebug:如何检查动态生成的Bootstrap工具提示？

Question

我想在Bootstrap(3.x)工具提示中添加一个CSS类,但它似乎无法正常工作.所以我想使用Firebug来检查工具提示内容.但是,当我将鼠标移动到Firebug区域时,动态生成的工具提示会消失.

如何检查动态生成的Bootstrap工具提示？

这是jsfiddle链接:http://jsfiddle.net/mddc/4JGx9/9/

<label>
Some Text 
<a href="#" data-toggle="tooltip" title="Tooltip goes here!">?</a>
</label>

$(function() { 
    $('[data-toggle="tooltip"]').tooltip({
        'animation': true,
        'placement': 'top' 
    });
});

谢谢!

Answer 1

1. 启用" 脚本"面板
2. 重新加载页面
3. 检查<label>包含的元素Some Text?
4. 右键单击该元素,然后从上下文菜单中选择Break On Child Addition或Removal
5. 将鼠标移到问号上=>脚本执行将停止,您将看到一个显示工具提示元素的提示.

6. 按Step Over按钮()或按F10一次,因此元素被添加到DOM
7. 切换到HTML面板

=>在那里你会看到<div>包含工具提示,你将能够检查它的样式.

Answer 2

我正在寻找如何在 firebug 中检查 JQuery 工具提示

1. 检查 Firebug 中的元素
2. 选择右侧的“事件”选项卡
3. 禁用 mouseout 事件。
4. 现在，当鼠标从元素上移开时，工具提示会保留下来。可以像任何其他元素一样通过 FireBug 进行检查。

这是一个小视频： https: //youtu.be/msTU8JDnaBU