使用 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

如果您将弹出框设置为允许这样的 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

要更改样式或颜色，您可以覆盖引导弹出框 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();
    }
});

点击离开时销毁弹出框：How to dismiss a Twitter Bootstrap popover by clicking outside?