使用Bootstrap 3实现“onmouseover”表单

Question

这是我的jsFiddle，其中包含完整的代码。

如果您将鼠标悬停在登录|上注册链接，你会看到一个小弹出窗口。我试图用这个来完成两件事：

• 用实际表格替换文本“将其替换为登录表单”（见下面的屏幕截图）;和
• 使弹出窗口更大以支持表单的大小（所有尝试使其大于您所看到的失败）。

我在此之后为我的登录/注册表格建模：

当前功能通过以下HTML完成：

<li class="signin">
    <a id="popoverData" href="#" data-content="Replace this with a login form" rel="popover" data-placement="bottom" data-original-title="Sign in to your account" data-trigger="hover">Sign In | Register</a>
</li>

以下是JS：

$('#popoverData').popover();

首先，我可能会在这里使用错误的工具（弹出窗口）。所以如果Bootstrap 3中有一个更好的机制/构造我应该用它，那么请告诉我！如果我在这里是正确的轨道，如果data-content是唯一的字段，我必须自定义用户在鼠标悬停/悬停时看到的文本，那么如何将整个登录/注册表单注入其中，因为它只是一个字符串属性？！？

Answer 1

如果您将popover设置为允许这样的html：

data-html="true"

然后您可以在data-content属性中使用html，如下所示：

data-content="<input class='form-control' placeholder='username'>"

这是一个很好的例子：http://www.bootply.com/Ho8JrccO69

您可能还想将触发器从“悬停”更改为“点击”，以便弹出窗口保持打开状态。

修改

要更改弹出窗口的宽度：Changing the width of Bootstrap popover

要更改样式或颜色，您可以覆盖引导程序popover css（站点范围），也可以使用模板选项更改此弹出窗口的模板（以下示例是默认模板）：

data-template='<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

要将弹出窗口内容设置为页面上已存在的表单的html，您可以使用javascript初始化它：

$('#popover').popover({ 
    content: function() {
      return $("#my-form").html();
    }
});

点击即可销毁popover：How to dismiss a Twitter Bootstrap popover by clicking outside?