如何使用Bootstrap Popover插件

弹出窗口类似于工具提示,提供带有标题的扩展视图。为了激活弹出框,用户只需将光标悬停在元素上。可以使用Bootstrap Data API完全填充弹出窗口的内容。

您可以尝试运行以下代码来实现Popover插件

示例

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container" style = "padding: 100px 50px 10px;" >
         <button type = "button" class = "btn btn-default" title = "Popover title"
            data-container = "body" data-toggle = "popover" data-placement = "left"
            data-content = "Some content in Popover on left">
               Popover on left
         </button>
         <button type = "button" class = "btn btn-primary" title = "Popover title"
            data-container = "body" data-toggle = "popover" data-placement = "top"
            data-content = "Some content in Popover on top">
            Popover on top
         </button>
         <button type = "button" class = "btn btn-success" title = "Popover title"
            data-container = "body" data-toggle = "popover" data-placement = "bottom"
            data-content = "Some content in Popover on bottom">
            Popover on bottom
         </button>
         <button type = "button" class = "btn btn-warning" title = "Popover title"
            data-container = "body" data-toggle = "popover" data-placement = "right"
            data-content = "Some content in Popover on right">
            Popover on right
         </button>
      </div>
      <script>
         $(function (){
            $("[data-toggle = 'popover']").popover();
         });
      </script>
   </body>
</html>