Popover Options - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Popover

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Popover

Introduction

The following table lists the options you can use to customize the popover plugin.

Name Type Default?Value Description
animation boolean true Apply a CSS fade transition to the popover.
html boolean false Insert html into the popover.
placement string | function 'right' Sets the position of the popover: top | bottom | left | right | auto.
selector stringfalse If a selector is provided, popover objects will be attached to the specified targets.
title string | function ''Sets the title value.
trigger string'click' how popover is triggered: click | hover | focus | manual.
content string | function ''Sets the default content value.
delay number | object 0 Time to delay in showing and hiding the popover (ms): does not apply to manual trigger type.
container string | falsefalse 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. Example: viewport: '#viewport' or {selector: '#viewport', padding: 0}

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Setting Title for Bootstrap 3 Popovers</title>
  <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(){
    $("#myPopovers a").popover({
        title : 'Default Title Text'
    });<!--from   w  ww. j  av  a2  s  .  co m-->
});
</script>
  <style type="text/css">
  .bs-example{
      margin: 100px 50px;
    }
    .a{
        margin: 5px;
    }
</style>
 </head>
 <body>
  <div>
   <div id="myPopovers">
    <a href="#" class="btn btn-default" data-toggle="popover" data-content="This is a link without title attribute. The title text of this popover is defined in JavaScript.">Popover</a>
    <a href="#" class="btn btn-primary" data-toggle="popover" data-content="This is another link without the title attribute. The title text of this popover is also defined in JavaScript.">Another Popover</a>
   </div>
  </div>
 </body>
</html>

Related Tutorials