javascript - Twitter Bootstrap，在一个 div 中显示所有弹出框

Question

我尝试使用 Twitter Bootstrap 2.0 和它的 popover-plugin 实现以下目标，但几个小时后，我仍然无法弄清楚。

比方说，在我页面的左下角，我有一张显示一只鸟的照片。这只鸟应该“说话”每个弹出窗口，例如注册表的那些，应该出现在鸟的顶部。这可能吗？

为了更好地理解，我在这里创建了一个测试站点。如果您将鼠标悬停在注册字段上，则会出现弹出框。我希望它们出现在左下角的 bird-img 上，但我不知道如何实现。如果你能帮助我，那就太好了。

Answer 1

方法一：

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

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

方法二：

或者，保留您所拥有的，但使用提供的“选择器”选项，并将您的鸟图像作为参数，这应该会触发您的控件的弹出窗口，但将其委托给您的鸟图像。

选择器：如果提供了选择器，工具提示对象将被委托给指定的目标

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

编辑：添加了示例代码。我没有机会对此进行测试，因此可能存在一些语法错误或其他问题，但总体思路就在那里。