How to use Bootstrap Popover Plugins

BootstrapWeb DevelopmentCSS Framework

The popover is similar to the tooltip, offering an extended view complete with a heading. For the popover to activate, a user just needs to hover the cursor over the element. The content of the popover can be populated entirely using the Bootstrap Data API.

You can try to run the following code to implement popover plugin

Example

Live Demo

<!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>
raja
Published on 21-Jun-2018 16:26:02
Advertisements