Popover 示例 HTML

Popover 是一种在页面中显示弹出窗口的工具。它主要用于在响应鼠标、键盘或其他事件时显示有用的信息。以下是一些使用 Popover 的示例。

带有动态内容的 Popover

这个示例展示了如何使用动态内容生成 Popover。 data-content 属性中的 HTML 代码可以通过 JavaScript 生成。

<button type="button" class="btn btn-default" data-toggle="popover" title="Popover 标题" data-content="">
  点我
</button>

<script>
  $(function () {
    $('[data-toggle="popover"]').popover({
      content: function() {
        return "动态生成的内容。";
      }
    });
  });
</script>

Popover 触发元素设为图标

这个示例展示了如何将 Popover 触发元素设为图标。可以使用 Font Awesome 等图标库实现。

<span class="fa-stack fa-lg" data-toggle="popover" data-placement="right" data-content="这是图标 Popover。">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

<script>
  $(function () {
    $('[data-toggle="popover"]').popover();
  });
</script>

带有自定义样式的 Popover

这个示例展示了如何自定义 Popover 的样式。可以通过 CSS 修改 popover-content 类的样式。

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="自定义样式 Popover" data-content="这是一个自定义样式 Popover。">
  点我
</button>

<style>
  .popover-content {
    background-color: #009688;
    color: #fff;
  }
</style>

<script>
  $(function () {
    $('[data-toggle="popover"]').popover();
  });
</script>

以上是几个基本使用 Popover 的示例，可以根据需要进行修改和扩展。