Twitter Bootstrap,在一个div上显示所有popovers

Question

我尝试使用Twitter Bootstrap 2.0和它的popover-plugin实现以下功能,但几个小时后,我仍然无法弄明白.

我们只是说,在我页面的左下角,我得到了一张显示鸟的照片.这只鸟应该"说话"每一个弹出窗口,例如登记表格,应该出现在鸟的顶部.这可能吗？

为了更好地理解,我在这里创建了一个测试站点.如果将鼠标悬停在注册字段上,则会有弹出窗口.我希望它们出现在左下角的鸟类中,但我不知道如何实现这一点.如果你能帮助我会很棒.

Answer 1

方法1:

jQuery悬停处理程序采用"in"和"out"方法,在您的示例中,您只分配"in"方法,以显示弹出窗口.这很好,但是不应该将它附加到"this",你应该将它附加到你的鸟图像上.确保也将弹出窗口的触发器更改为手动.然后在悬停的"out"方法中,你只需要隐藏弹出窗口.

$('#registerHere input').hover(function()
{
    $('#birdie').popover({
            "trigger": 'manual',
            "placement":'top',
                }).popover('show');
},
function()
{
    $('#birdie').popover('hide');
});

方法2:

或者,保留你所拥有的,但使用提供的"选择器"选项,并将它的鸟图像作为参数给它,这应该从你的控件触发弹出窗口,但将它委托给你的鸟图像.

selector:如果提供了选择器,则工具提示对象将委派给指定的目标

$('#registerHere input').hover(function()
{
    $('#birdie').popover({
            "selector": "#birdie",
            "placement":'top',
                }).popover('show');
});

编辑:添加了示例代码.我没有机会对此进行测试,因此可能存在一些语法错误或其他问题,但总体思路是存在的.