Question

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

我们只想说，在我页面的左下角，我看到了一张显示鸟的照片。这只鸟应该“说话”每一个弹出窗口，例如登记表格，应该出现在鸟的顶部。这可能吗？

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

Answer 1

方法1：

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

$('#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');
});

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

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

1 个答案: