Summary

Twitter Bootstrap has made it somewhat easier to use popovers in website design. However their documentation is generally written for intermediate and advanced users. The aim of this website has been to re-write the popover documentation for those new to Bootstrap popovers.

Getting Started

Popovers give designers the option of displaying additional information on clean user interfaces. However, popovers are sometimes used to do things that they were not meant to do. This is a mistake. For beginners it is much better to use popovers for what they were designed to do rather than trying to complicate them. This article will show how popovers are meant to work without complicating things further.

Loading Dependencies

Most of the time, when a popover doesn't work, its because of configuration problems with the .cssfiles and/or .js plugins. Either custom .css files are messing with the way the popovers are displaying or the .js plugins are loading in the wrong order, are outdated or messing with each other in some other way. The first step in getting your popovers running correctly is to pay attention to the .js plugin dependencies.

Popover plugin dependencies

If you include .js plugins individually the tooltip plugin must be included to get the popovers to work. The tooltip plugin (bootstrap-tooltip.js) must be loaded before the popover plugin (bootstrap-popover.js) (See Example 1). Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult Bootstrap bower.json to see which versions of jQuery are supported.

Note: If the jQuery file is being loaded from the Google API such as https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, then your computer must be connected to the Internet for popovers to work.

Individual or all-inclusive

Plugins can be included individually using Bootstrap's individual *.js files (Example 1), or all at once using bootstrap.js (Example 2) or the minified bootstrap.min.js.

There are two ways to include the .js files in bootstrap.

Do not attempt to use both methods.

Load .js plugins individually or load the all-including .js file. Choose either Example 1 or Example 2 but do not use both methods.

Example 1: How to include individual .js plugins


  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
  </body>

The second way to include the .js plugins is to use the all-inclusive .js file, which includes all of the bootstrap JavaScript plugins in a single file.

Do not attempt to include both.

Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. Do not load both files.

Example 2: How to include the all-inclusive .js file


  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>

Loading .css

Custom .css files can cause the default bootstrap popovers to do all sorts of weird things. The simplest way to test whether a custom .css file is causing problems is to comment out the custom files and load the default bootstrap.css file. The following code shows how the default .css files should be loaded.

Example 3: How to include .css

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
Important: If this is getting frustrating remember that taking a break to clear your head can be the best solution.

Putting it together

A popover on 'click' requires the end user to mouse-click or to press the button before the popover will show.

Demo 1: Popover on 'click'

Code for Demo 1 (popover on 'click').

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
    <button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button" >Click to toggle popover</button>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
  </body>
</html>

Popover on 'hover'

A popover on 'hover' requires the end user to hover the mouse over the button for the popover to show.

Demo 2: popover on 'hover'.

Code for Demo 2 (popover on 'hover').

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
    <button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button" >Click to toggle popover</button>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script>
	  $("#popover").popover({ trigger: "hover" });  
    </script>
  </body>
  </body>
</html>

Popover positions

Four options are available: top, right, bottom, and left aligned. This is particularly useful for mobile devices where loading a popover to the 'right' or 'left' may place it out of view.

Demo 3: popover directions

On mobile devices, it may be better to load the popovers to the 'top' or 'bottom'. Below is the code to make the popups load the popup on top.

Demo 4: hover popover on 'top'

Code for Demo 4 (hover popover on 'top').

To align the popovers at other positions, in the code below, replace "top" with either "right", "bottom" or "left".


<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" data-placement="top" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button" >Click to toggle popover</button>
    

Resources

In terms of getting the popovers up and running, thats about all you need to know. Of course there are many other things you can do with popovers but for the sake of simplicity, those resources are listed below for you to view at your leisure.

Extending popovers

Tech Support

a2zwebhelp 2014, Popover- jQuery CSS Bootstrap Popover, viewed 22 Jan. 2014, <http://www.a2zwebhelp.com/bootstrap-popover>.

Github, Inc. 2014, Issue list: Popover, viewed 21 Jan. 2014, <https://github.com/twbs/bootstrap/issues/3484>.

Twitter Bootstrap 2014, Basic template, viewed 22 Jan. 2014, <http://getbootstrap.com/getting-started/#template>.

Twitter Bootstrap 2014, Overview, viewed 23 Jan. 2014, <http://getbootstrap.com/javascript/#js-overview>.

Twitter Bootstrap 2014, Popovers, viewed 24 Jan. 2014, <http://getbootstrap.com/javascript/#popovers>.

W3resource 2014, Twitter Bootstrap Popover Tutorial, viewed 22 Jan. 2014, <http://www.w3resource.com/twitter-bootstrap/popover-tutorial.php>.