弹出窗口类似于工具提示,提供带有标题的扩展视图。为了激活弹出框,用户只需将光标悬停在元素上。可以使用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>