Bootstrap Tutorial - Bootstrap Popovers

Popovers are like tooltips but larger and more stylish. You can place more content in a popover than a tooltip. It is recommended to use popovers instead of tooltips when you have more HTML content or textual content to display.

The data-toggle attribute directs what to trigger when an action is performed on this button. The data-placement attribute specifies the position of the popover.

The data-content attribute should contain the content you want to convey in the popover. Finally, set the title attribute to append a header to the plugin.

We need to add the popoverButton class to the button.

<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--  w  w  w.  j  a  v a  2  s  . com-->
    $('.popoverButton').popover(); 
});
</script>
</head>
  <body style='margin:30px'>
          <!-- Popover -->
          <button type="button" 
          class="btn btn-danger popoverButton" 
          data-toggle="popover" 
          data-placement="bottom" 
          data-content="Lorem Ipsum Donor." 
          title="This is a demo popover">
            Click Me!
          </button>
  </body>
</html>

Click to view the demo

Triggering the Popovers

Popovers can be triggered via JavaScript.

<!--  www.j  av  a 2  s . c o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top'
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
    <button type="button" class="btn btn-success" data-toggle="popover" title="Popover title" data-content="Another popover">Another popover</button>
    <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
    <button type="button" class="btn btn-warning" data-toggle="popover" title="Popover title" data-content="The last popover!">Last popover</button>
</div>
</body>
</html>

Click to view the demo

Positioning of Popovers via Data Attributes

The following example shows how to set the direction of popovers via data attributes.

<!--from w w w  . j  a  v  a 2  s  . c  om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Default popover">Popover on top</button>
    <button type="button" class="btn btn-success" data-toggle="popover" data-placement="right" title="Popover title" data-content="Popover on right.">Popover on right</button>
    <button type="button" class="btn btn-info" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="Popover on bottom.">Popover on bottom</button>
    <button type="button" class="btn btn-warning" data-toggle="popover" data-placement="left" title="Popover title" data-content="Popover on left.">Popover on left</button>
</div>
</body>
</html>

Click to view the demo

Positioning of Popovers via JavaScript

The following example shows how to set the direction of popovers via JavaScript.

<!--  w  w w  . j a  v a 2  s. co  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".popover-top").popover({
        placement : 'top'
    });
    $(".popover-right").popover({
        placement : 'right'
    });
    $(".popover-bottom").popover({
        placement : 'bottom'
    });
    $(".popover-left").popover({
        placement : 'left'
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary popover-top" data-toggle="popover" title="Popover title" data-content="Default popover">Popover on top</button>
    <button type="button" class="btn btn-success popover-right" data-toggle="popover" title="Popover title" data-content="Popover on right.">Popover on right</button>
    <button type="button" class="btn btn-info popover-bottom" data-toggle="popover" title="Popover title" data-content="Popover on bottom.">Popover on bottom</button>
    <button type="button" class="btn btn-warning popover-left" data-toggle="popover" title="Popover title" data-content="Popover on left.">Popover on left</button>
</div>
</body>
</html>

Click to view the demo

Hiding the Popovers on Next Click

By default popovers are not hiding until you click the trigger element once again. We can use the focus trigger to hide the popovers when the user makes the next click.

<!--  ww  w. j  a  v a 2s .c  o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top'
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
    .popover-examples{
        margin-bottom: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="popover-examples">
        <a href="#" class="btn btn-primary" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Default popover">Popover</a>
        <a href="#" class="btn btn-success" data-toggle="popover" tabindex="1" data-trigger="focus" title="Popover title" data-content="Another popover">Another popover</a>
        <a href="#" class="btn btn-info" data-toggle="popover" tabindex="2" data-trigger="focus" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</a>
        <a href="#" class="btn btn-warning" data-toggle="popover" tabindex="3" data-trigger="focus" title="Popover title" data-content="The last tip!">Last popover</a>
    </div>
    <p><strong>Note:</strong> To hide the popover you can either click the next button or click outside.</p>
</div>
</body>
</html>

Click to view the demo

Options

We can use the following options for the popover.

Name	Type	Default Value	Description
animation	boolean	true	Apply a CSS fade transition.
html	boolean	false	Insert html into the popover. If false, jQuery's `text()` method will be used to insert content into the DOM.
placement	string \| function	'right'	Sets the position of the popover - top \| bottom \| left \| right \| auto.
selector	string	false	If a selector is provided, popover objects will attach to the specified targets.
title	string \| function	''	Sets the default `title` value if title attribute isn't present.
trigger	string	'click'	Specify how popover is triggered - click \| hover \| focus \| manual.
content	string \| function	''	Sets the default content value if `'data-content'` attribute isn't present.
delay	number \| object	0	Time to delay in showing and hiding the popover (ms)
container	string \| false	false	Appends the popover to a specific element `container: 'body'`
template	string	`'<div class='popover'> <div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div></div>'`	Base HTML to use when creating the popover.
viewport	string \| object	`{ selector: 'body', padding: 0 }`	Keeps the popover within the bounds of this element.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--  w  w  w  .j a va2 s  .  co m-->
    $("#myPopover").popover({
        title : 'Default title value'
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg" 
            id="myPopover" data-toggle="popover" 
            data-content="And here's some amazing content.">Popover Example</button>    
</div>
</body>
</html>

Click to view the demo

The following code shows how to use .popover() methods.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from   w ww  .j a v a 2s. co m-->
    $(".show-popover").click(function(){
       $("#myPopover").popover('show');
    });
    $(".hide-popover").click(function(){
       $("#myPopover").popover('hide');
    });
    $(".toggle-popover").click(function(){
       $("#myPopover").popover('toggle');
    });
    $(".destroy-popover").click(function(){
       $("#myPopover").popover('destroy');
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 100px 50px;
    }
  .popover-examples{
    margin-bottom: 60px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="popover-examples">
        <button type="button" title="Popover title" class="btn btn-primary btn-lg" 
        id="myPopover" data-toggle="popover" 
        data-content="And here's some amazing content. ">Popover Example</button>
    </div>
    <div class="popover-controls">
        <p>Click on the following buttons to control the popover manually.</p>
      <input type="button" class="btn btn-info show-popover" value="Show">
        <input type="button" class="btn btn-warning hide-popover" value="Hide">
        <input type="button" class="btn btn-success toggle-popover" value="Toogle">
        <input type="button" class="btn btn-danger destroy-popover" value="Destroy">
    </div>    
</div>
</body>
</html>

Click to view the demo

Events

The following table lists the events for popover.

Event	Description
show.bs.popover	fires immediately when the show instance method is called.
shown.bs.popover	fired when the popover has been made visible to the user after the animation.
hide.bs.popover	fired immediately when the hide instance method has been called.
hidden.bs.popover	fired when the popover has finished being hidden from the user after the animation.

The following example displays a log message when fade out transition of the popover has been fully completed.

<!--from  www  .jav  a 2s  . co m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // Initialize tooltip
    $('[data-toggle="popover"]').popover({
        placement : 'top'
    });
  // Fire tooltip event
  $('[data-toggle="popover"]').on('hidden.bs.popover', function(){
        console.log("Popover has been completely closed. Click the button again to view the popover.");
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
  <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
  <button type="button" class="btn btn-success" data-toggle="popover" title="Popover title" data-content="Another popover">Another popover</button>
  <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
  <button type="button" class="btn btn-warning" data-toggle="popover" title="Popover title" data-content="The last popover!">Last popover</button>
</div>
</body>
</html>

Click to view the demo

Bootstrap Tutorial - Bootstrap Popovers

Triggering the Popovers

Positioning of Popovers via Data Attributes

Positioning of Popovers via JavaScript

Hiding the Popovers on Next Click

Options

Method for popover

Events