下面我们再处理一下这个摘要按钮，这个地方我们可以使用 Bootstrap 的 Popover ...

在 Bootstrap 项目的网站 ... 点击 Javascript ... Popover ... 在示例这里你可以看到不同方向的 Popover 的样式 ...

在下面有演示 ... 点击 按钮 ... 可以弹出 Popover 的窗口，上面会显示我们定义的内容 ... Popover 有四个方向 ... 点键点击 Popover on top 这个按钮 ... 选择 审查元素 ... 你可以参考这个按钮的代码结构来改选我们自己的摘要按钮 ...

回到网页代码模式 ... 找到摘要按钮 ... 在 <a> 标签里，添加 Popover 必要的属性和属性的值 ...

先输入一个 rel="popover" ，data-original-title="" ，这个属性里的值会作为 Popover 窗口的标题 ... 输入 摘要 ...

然后是 Popover 窗口的内容属性， data-content="一个温馨可爱的农场婚礼" ... 最后我们可以定义窗口的方向，使用 data-placement 属性，把属性的值设置为 top ，表示窗口从上方弹出来 ...

下面我们要写一行 javascript 代码来触发摘要按钮上的 Popover ...

打开 js 目录下面的 fenikso.js ... 在新的一行里，输入

$(' #main-content [rel=popover] ').popover()

保存一下，然后回到网页的视图模式下 ... 用鼠标点击摘要按钮 ... 会弹出 Popover 窗口，上面会显示我们定义的内容 ... 再次点击这个按钮可以关闭这个窗口 ...

我们可以修改一下触发 Popover 窗口的行为，默认是点击，也就是只有点击才能弹出这个窗口，我们可以改成鼠标悬停，就是把鼠标放在上面就会直接弹出这个窗口 ...

回到网页代码 ... 在摘要按钮上面 ... 添加一个 data-trigger 属性，属性的值设置为 hover ... 保存 ...

回到视图模式，鼠标放在摘要按钮的上面 ... 会直接弹出 Popover 窗口。