实例

静态弹出框

4+4个可能的弹出方向：顶部、右侧、底部和左侧以及左上角、右上角、左下角和右下角。

Popover 顶部

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover 右侧

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover 顶部

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover 左侧

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover 左上角

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover 右上角

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover 左下角

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover 右下角

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

实例演示

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button>

4+4个弹出方向



<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 左侧
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 顶部
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 底部
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 右侧
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 左上角
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 右上角
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom left" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 左下角
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 右下角
</button>

点击并让弹出框消失

通过使用 focus 触发器可以在用户点击弹出框是让其消失。

实现“点击并让弹出框消失”的效果需要一些额外的代码

为了更好的跨浏览器和跨平台效果，你必须使用 <a> 标签，不能使用 <button> 标签，并且，还必须包含 role="button" 和 tabindex 属性。

可消失的弹出框 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>