YouTip

\\n\\n

Bootstrap Popover

\\n\\n

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

\\n\\n

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

\\n\\n

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

\\n\\n

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

\\n\\n

Make sure you download bootstrap-tooltip.js before downloading bootstrap-popover.js. Popover depends on the Tooltip plugin, so the Tooltip plugin must be loaded first.

\\n\\n

Example

\\n\\n\\n\\n$(function ()\\n\\n{ $("#example").popover();\\n\\n});\\n\\n

View example online

\\n\\n

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

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n

Code	Explanation
id="example"	The ID assigned to the relevant anchor element. The value of the ID points to the JavaScript that implements the popover later.
class="btn btn-danger"	Creates a button. btn btn-danger is the class used in this example. You can use any other class from Bootstrap CSS or define your own 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/ js/bootstrap-tooltip.js"></script>	References the Bootstrap Tooltip plugin JS file.
<script src="../bootstrap/twitter-bootstrap-v2/js/ bootstrap-popover.js"></script>	References the Bootstrap Popover plugin JS file.
$(function ()	Prepares the document. A jQuery command.
$("#example").popover();	Accesses the element with ID example and applies popover() to it.

\\n\\n

Here, we created a popover without any customization outside the box—that is, we didn’t pass any options to popover().

\\n\\n

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

\\n\\n

$(function () { $("identifier").popover(options); });
\\nWhere identifier is a jQuery selector identifying the relevant container element. Next, let’s look at what options are available.

\\n\\n

Below are some options you might use with popover() to customize the appearance and behavior of the Popover.

\\n\\n

animation

\\n\\n

The animation option accepts a boolean value and defaults to true. It adds a CSS fade transition effect to the tooltip.

\\n\\n

placement

\\n\\n

The placement option accepts a string or function and defaults to 'right'. Other possible values include 'top', 'bottom', and 'left'. This option determines the position of the Popover relative to the anchor text. Below is an example using the placement option.

\\n\\n

Example

\\n\\n\\n\\na {\\n\\nmargin-left : 400px;\\n\\n}\\n\\n\\n\\n$(function ()\\n\\n{ $("#example").popover();\\n\\n$("#example_left").popover({placement:'left'});\\n\\n$("#example_top").popover({placement:'top'});\\n\\n$("#example_bottom").popover({placement:'bottom'});\\n\\n});\\n\\n

View example online

\\n\\n

selector

\\n\\n

The selector option accepts a string and defaults to false. Using this option delegates the Tooltip object to the specified target.

\\n\\n

trigger

\\n\\n

The trigger option accepts a string and defaults to 'hover'. Other possible values include 'focus' and 'manual'. This option determines how the tooltip is triggered. The following example demonstrates how to trigger a Popover using the focus option.

\\n\\n

Example

\\n\\n\\n\\n$(function ()\\n\\n{ $("#example").popover({trigger: 'focus'});\\n\\n});\\n\\n

View example online

\\n\\n

title

\\n\\n

The title option accepts a string or function and defaults to '' (empty string), meaning the title attribute value is not displayed by default.

\\n\\n

content

\\n\\n

The content option accepts a string or function and defaults to '' (empty string), meaning the data-content attribute value is not displayed by default. Below is an example using both the title and content options. This example also demonstrates how to use multiple options together.

\\n\\n

Example

\\n\\n\\n\\n<script src="https://a