❮ Bootstrap Jumbotron Bootstrap Button Dropdowns ❯

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 with some available options.

What is Required

You must reference jQuery, Bootstrap CSS, and two JavaScript files - one for Bootstrap Tooltip, and one for Bootstrap Popover.

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

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

Using Bootstrap Popover in Your Website

Example

<div class="container">
    <h2>Creating a Popover with Bootstrap</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltip 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"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
    $(function ()
    { $("#example").popover();
    });
</script>

Explanation

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

Code	Explanation
id="example"	The id assigned to the relevant anchor, the id value points to the JavaScript that implements the popover.
class="btn btn-danger"	Creates 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 defined 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	The anchor text.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>	References jQuery.
<script src="../bootstrap/twitter-bootstrap-v2/

<script src="js/bootstrap-tooltip.js"></script> | Reference the Bootstrap Tooltip (tooltip plugin) JS file. |
| <script src="../bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script> | Reference the Bootstrap Popover (popover plugin) JS file. |
| $(function () | Prepare the document. jQuery command. |
| $("#example").popover(); | Access the id example and implement popover() on it. |

Here, we did not create a popover outside the box, without any customization, i.e., without using any options with popover().

## Usage

Thus, we can summarize the usage of Bootstrap Popover as follows:

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


Where *identifier* is a jQuery selector used to identify the relevant container element. Next, let's look at what *options* are available.

## Options

Below are some options that can be used to customize the appearance and feel of the Popover when using popover().

## Animation

The type of the animation value is boolean, with a default value of true. It is used to bring a CSS fade transition effect to the tooltip.

## Placement

The type of the placement value can be a string or function, with a default value of 'right'. Other values that can be used are top, bottom, and left. This option determines the position of the Popover around the anchor text. Here is an example using the placement option.

## Example

```html
<!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" rel="stylesheet">
    <style>
        a {
            margin-left: 400px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>Creating Popover with Bootstrap Placement Option</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-success" rel="popover" data-content="Creating a tooltip for my website is so easy!" data-original-title="Twitter Bootstrap Popover">Hover to Pop</a>
    </div>
    <div class="well">
        <a href="#" id="example_left" class="btn btn-success" rel="popover" data-content="Creating a tooltip for my website is so easy!" data-original-title="Twitter Bootstrap Popover">Hover to Pop</a>
    </div>
    <div class="well">
        <a href="#" id="example_top" class="btn btn-success" rel="popover" data-content="Creating a tooltip for my website is so easy!" data-original-title="Twitter Bootstrap Popover">Hover to Pop</a>
    </div>
    <div class="well">

<a href="#" id="example_bottom" class="btn btn-success" rel="popover" data-content="Creating a tooltip for my website is so easy!" 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"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
    $(function ()
    { $("#example").popover();
        $("#example_left").popover({placement:'left'});
        $("#example_top").popover({placement:'top'});
        $("#example_bottom").popover({placement:'bottom'});
    });
</script>
</body>
</html>

selector

The selector value type is string, with a default value of false. This option allows you to authorize the Tooltip object to a given target.

trigger

The trigger value type can be string, with a default value of 'hover'. Other values that can be used are 'focus' and 'manual'. This option determines how the tooltip begins. The following example demonstrates how to trigger a Popover using the focus option.

Example

<div class="container">
    <h2>Creating Popovers with Bootstrap Trigger Option</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-success" rel="popover" data-content="Creating a tooltip for my website is so easy!" 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"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
    $(function ()
    { $("#example").popover({trigger: 'focus'});
    });
</script>

title

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

content

The content value type can be string or function, with a default value of ''. This means that by default, the value of the data-content attribute is not displayed. The following 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 Using Title and Content Options</h2>
    <div class="well">
        <a href="#" 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"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
    $(function ()
    { $("#example").popover({title: 'Twitter Bootstrap Popover', content: "Creating a tooltip for my website is so easy!"});
    });
</script>

Delay

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

Changing the Default Markup and Style of the Popover

The default markup for the popover window is located on 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 modify it to include your own markup.

The default style for the popover window is located from line 3027 to 3118. You can modify it to include your own styles.

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

❮ Bootstrap Jumbotron Bootstrap Button Dropdowns ❯