Bootstrap Popover

Often times when you click an element on a webpage a tooltip or a message box pop overs containing information regarding the element you clicked. Such information boxes are known as popovers. Bootstrap also allows developers t create full responsive and customized popovers.

To create bootstrap popover, simply add “data-toggle=”popover”” attribute to the element to which you want to add popover. Bootstrap popover has two elements: A title and content. To specify the title, add “title” attribute to the element. The value of the title attribute is text displayed in the header or title section of the popover. Similarly the popover content is added via “content” attribute. Last but not the least, you have call “popover” method to all the elements with “data-toggle=”popover”” attribute using JQuery. This initializes the popover for all the elements on the page. To see basic popover in action, take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

      <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover(); 
        });
        </script>
    
        
    </head>
    
    <body>
        <button class="btn btn-primary btn-large" data-toggle="popover" title="Popover Title" data-content="Some Random Popover Text">Click to Popover</button>
             
    </body>

</html>

Download the code Try the code

If you open the above html code in webpage, you should see a blue button. When you click the button a popover will appear containing the title and content you specified in the element.

Closing a Bootstrap Popover

To close a bootstrap, simply click the element again. However you can also close your popover by clicking anywhere outside its boundary if you add “data-trigger=”focus”” to your element. Take a look at the following code sample to see how this works.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

      <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover(); 
        });
        </script>
    
    </head>
    
    <body>
        <button class="btn btn-primary btn-large" data-toggle="popover" data-trigger="focus" title="Popover Title" data-content="Some Random Popover Text">Click to Popover</button>
             
    </body>

</html>

Download the code Try the code

Again open the above page in browser and click the blue button. You will see popover appear. Now click anywhere outside the boundary of this popover, the popover shall disappear.

Bootstrap Popover with Hover

You can also make a popover appear when you hover the mouse over the element rather than clicking it. To dos, simply add “data-trigger=”hover”” attribute to the element. The following example demonstrates this concept.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

      <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover(); 
        });
        </script>
    
    </head>
    
    <body>
        <button class="btn btn-primary btn-large" data-toggle="popover" data-trigger="hover" title="Popover Title" data-content="Some Random Popover Text">Click to Popover</button>
             
    </body>

</html>

Download the code Try the code

Now if you open the above page and just hover mouse on the blue button, you shall see popover appear.

<<< Bootstrap ModalBootstrap Scrollspy >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .