在悬停/焦点上显示密码要求引导弹出窗口并在弹出窗口中传递显式 Html 内容以显示

Question

我们如何使用 twitter Bootstrap 弹出窗口和悬停时的 jquery 来显示密码字段的密码要求。

<input id = "txtPassword" type = "password"  title ="password" />

1. 我想传递自定义的“html”作为弹出框的内容。
2. 将弹出窗口的标题更改为自定义标题
3. 将弹出窗口的样式从当前的基本样式更改为自定义样式。

Answer 1

对于初学者，您可以让事情变得简单，并使用最简单的popover bootstrap：

1.在您的项目中包含正确的引导程序文件以使其工作： a.bootstrap-tooltip.js b.bootstrap-popover.js c.jquery.min.js d.bootstrap.css

2.仅将元素用作将触发popover的元素，例如：

<a href="#" id="example" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>  

使用：id="example"，您可以使用jquery 访问元素，以便显示带有popover 的内容

在data-content="some text" 上：这是将显示在popover 窗口上的文本

在data-original-title="some title" 上：您可以决定在popover 窗口上显示什么标题

3.使用jquery访问和激活popover，如下所示：

$(function ()  
{ $("#example").popover();  
});  

从那开始，然后尝试更深入地挖掘你的目标。