Bootstrap Popover

Description

Bootstrap Popover is created using a custom Jquery plugin. It can be used to display some information for any element.

In this tutorial, you will see how to use Bootstrap Popover and how to customize it using some of the available options.

What is required

You must reference Jquery, Bootstrap CSS, and two JavaScript files - one for Bootstrap Tooltip (tooltip plugin) and one for Bootstrap Popover.

The JS file for Tooltip (tooltip plugin) is located in the js folder inside your Bootstrap folder and is named bootstrap-tooltip.js. The JS file for Popover is located in the js folder inside your Bootstrap main folder and is named bootstrap-popover.js. Jquery is located under docs > assets > js in your Bootstrap main folder and is named jquery.js. Alternatively, you can directly visit https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js to download Jquery.

Please make sure you download bootstrap-tooltip.js before you download bootstrap-popover.js. The popover depends on the tooltip plugin, so the tooltip plugin needs to be loaded first.

Using Bootstrap Popover on your website

Example

<div class="container">
<h2>Create Popover with Bootstrap</h2>
    <div class="well">
        <a href="../index.html" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js.html"></script>
<script>
    $(function ()
    { $("#example").popover();
    });
</script>

View example online

Explanation

The table below explains the above code. It will help you understand how to use Bootstrap Popover.

Code Explanation
id="example" Assign an id to the relevant anchor, the value of the id points to the JavaScript that will implement popover later.
class="btn btn-danger" Create a button. btn btn-danger is the class used in the example. You can use any other class from Bootstrap CSS, or use your own custom class.
data-content="It's so simple to create a tooltip for my website!" The value of data-content is displayed in the body of the popover.
data-original-title="Bootstrap Popover" The value of data-original-title is displayed as the title of the popover.
hover for popover Anchor text.
<script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.7.1/jquery.min.js"></script> Reference Jquery.
<script src="../bootstrap/twitter-bootstrap-v2/ js/bootstrap-tooltip.js"></script> Reference the JS file for Bootstrap Tooltip (tooltip plugin).
<script src="../bootstrap/twitter-bootstrap-v2/js/ bootstrap-popover.js"></script> Reference the JS file for Bootstrap Popover.
$(function () Prepare the document. Jquery command.
$("#example").popover(); Access the id example and implement popover() on it.

Here we did not create the popover outside the box, without any customization, i.e., we did not use any options through popover().

Usage

So, we can summarize the usage of Bootstrap Popover as:

$(function ()  
{ $("identifier").popover(options);  
});

Whereidentifieris a Jquery selector used to identify the relevant container element. Next, let's take a look atoptionswhat they are.

Options

Below are some options that you may use with popover() to customize the appearance and feel of the Popover.

animation

The type of the animation value is boolean, with a default value of true. It is used to give the tooltip (tooltip plugin) a CSS gradient transition effect.

placement

The placement value can be of type string or function, with a default value of 'right'. top, bottom, and left are other usable values. This option is used to determine the position of the Popover (popover) around the anchor text. Below is an example using the placement option.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Bootstrap Popover Placement Example</title>
    <meta name="description" content="Creating Modal Window with Twitter Bootstrap">
    <link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
    <style>
        a {
            margin-left : 400px;
        }
    </style>
</head>
<body>
<div class="container">
<h2>Create a Popover Using Bootstrap Placement Option</h2>
    <div class="well">
<a href="../index.html" id="example" class="btn btn-success" rel="popover" data-content="Creating a tooltip for my website is so simple!" data-original-title="Twitter Bootstrap Popover">Hover Popover</a>
    </div>
    <div class="well">
<a href="../index.html" id="example_left" class="btn btn-success" rel="popover" data-content="Creating a tooltip for my website is so simple!" data-original-title="Twitter Bootstrap popover">Hover to pop up</a>
    </div>
    <div class="well">
<a href="../index.html" id="example_top" class="btn btn-success" rel="popover" data-content="Creating a tooltip for my website is so simple!" data-original-title="Twitter Bootstrap popover">Hover to pop up</a>
    </div>
    <div class="well">
<a href="../index.html" id="example_bottom" class="btn btn-success" rel="popover" data-content="Creating a popover for my website is so simple!" data-original-title="Twitter Bootstrap Popover">Hover Popover</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js.html"></script>
<script>
    $(function ()
    { $("#example").popover();
        $("#example_left").popover({placement:'left'});
        $("#example_top").popover({placement:'top'});
        $("#example_bottom").popover({placement:'bottom'});
    });
</script>
</body>
</html>

View the example online

selector

The type of the selector value is string, with a default value of false. By using this option, the Tooltip object can be delegated to the given target.

trigger

The type of the trigger value can be string, with a default value of 'hover'. focus and manual are other usable values. This option is used to determine how the tooltip (tooltip plugin) is triggered. The following example demonstrates how to use the focus option to trigger the Popover (popover).

Example

<div class="container">
<h2>Using the Bootstrap trigger option to create a popover</h2>
    <div class="well">
<a href="../index.html" id="example" class="btn btn-success" rel="popover" data-content="Creating a tooltip for my website is so simple!" data-original-title="Twitter Bootstrap Popover">Hover Popover</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js.html"></script>
<script>
    $(function ()
    { $("#example").popover({trigger: 'focus'});
    });
</script>

View the example online

title

The type of the title value can be string or function, with a default value of ''. That is, the value of the title attribute is not displayed by default.

content

The type of the content value can be string or function, with a default value of ''. That is, the value of the data-content attribute is not displayed by default. Below is an example using the title and data-content options. This example also demonstrates how to use multiple options together.

Example

<div class="container">
<h2>Bootstrap popover uses the title and content options</h2>
    <div class="well">
<a href="../index.html" id="example" class="btn btn-success" rel="popover">Hover Popover</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js.html"></script>
<script>
    $(function ()
{ $("#example").popover({title: 'Twitter Bootstrap Popover', content: "Creating a popover for my website is so simple!"});
    });
</script>

View the example online

delay

The type of the `delay` value can be a `number` or an `object`, with a default value of 0. This determines the wait time for showing and hiding the popover, in milliseconds. If the value is set to a number, the wait time applies to both showing and hiding. If the value is set to an object, the structure is `delay: { show: 500, hide: 100}`, where 500 and 100 are in milliseconds.

Changing the default markup and style of popover

The default markup of the Popover popup is located at line 92 of the bootstrap-popover.js file. As shown below:

template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
            

You can change it and put your own markup.

The default styles of the Popover popup are located at lines 3027 to 3118. You can modify them and put your own styles.

Click here to download all HTML, CSS, JS, and image files used in this tutorial.

Other extensions