Bootstrap pop-up box
description
Bootstrap Popover (popups) are using a custom Jquery plugin creates. It can be used to display some information about any element.
In this tutorial, you'll see how to use the Bootstrap Popover, and how to use some of the available options for customization.
What is required
You must reference Jquery, Bootstrap CSS and two JavaScript files - one for the Bootstrap Tooltip (tooltip widget), one for the Bootstrap Popover (pop-ups).
JS file for Tooltip (tooltip widget) is located in your Bootstrap folder js folder named bootstrap-tooltip.js. JS file for Popover (pop-ups) is located in your home folder in the Bootstrap js folder named bootstrap-popover.js. Bootstrap Jquery located in your home folder in the docs> assets> js under the name jquery.js. Or you can directly access https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js download Jquery.
Make sure that you download the bootstrap-tooltip.js before downloading bootstrap-popover.js. Pop-up tooltips dependent plug-in, you need to load the tooltip widget.
Bootstrap Popover use in your site (pop-up)
Examples
<H2> to create a pop-up box using Bootstrap </ h2>
<Div class = "well">
<A href = "#" 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"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / js / bootstrap-popover.js"> </ script>
<Script>
$ (Function ()
{$ ( "# Example") popover ().;
});
</ Script>
View online examples
Explanation
The following table explains the above code. It will help you understand how to use Bootstrap Popover (pop-ups).
| 代码 | 解释 |
|---|---|
| id="example" | 分配给相关锚的 id，id 的值指向后边要实现 popover（弹出框）的 JavaScript。 |
| class="btn btn-danger" | 创建一个按钮。btn btn-danger 是实例中使用的 class。您可以使用 Bootstrap CSS 中任何其他的 class，或者使用您自己定义的 class。 |
| data-content="It's so simple to create a tooltip for my website!" | data-content 的值显示在 popover（弹出框）的主体中。 |
| data-original-title="Bootstrap Popover" | data-original-title 的值显示为 popover（弹出框）的标题。 |
| hover for popover | 锚文本。 |
| <script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.7.1/jquery.min.js"></script> | 引用 Jquery。 |
| <script src="../bootstrap/twitter-bootstrap-v2/ js/bootstrap-tooltip.js"></script> | 引用 Bootstrap Tooltip（工具提示插件）的 JS 文件。 |
| <script src="../bootstrap/twitter-bootstrap-v2/js/ bootstrap-popover.js"></script> | 引用 Bootstrap Popover（弹出框）的 JS 文件。 |
| $(function () | 准备文档。Jquery 命令。 |
| $("#example").popover(); | 访问 id example，并在上面实现 popover()。 |
Here we do not create a popover (pop-up) outside the box, without any custom that did not pass the popover () using any of the options.
usage
Therefore, we can conclude that Bootstrap Popover (pop-ups) usage is:
$ (Function ()
{$ ( "Identifier") popover (options).;
});
Wherein the identifier is a Jquery selector for the container element identifies relevant. Next, we take a look at what are the options.
Options
Here are some via popover () when custom Popover (pop-ups) look and feel are likely to use options.
animation
Type animation value is boolean, the default value is true. Used to tooltip (tooltip widget) bring css gradual transition effects.
placement
Type of placement value can be string or function, the default value is 'right', top, bottom, and left several other values can be used. Popover (popups) This item is used to surround around the anchor text is the location. Here is an example of the use of placement options.
Examples
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap instance pop-up box selected position </ 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> Use Bootstrap plcement option to create a pop-up box </ h2>
<Div class = "well">
<A href = "#" id = "example" class = "btn btn-success" rel = "popover" data-content = "Create a message box to my site so simple!" Data-original-title = "Twitter Bootstrap pop-up "> hover pop </a>
</ Div>
<Div class = "well">
<A href = "#" id = "example_left" class = "btn btn-success" rel = "popover" data-content = "Create a message box to my site so simple!" Data-original-title = "Twitter Bootstrap pop-up "> hover pop </a>
</ Div>
<Div class = "well">
<A href = "#" id = "example_top" class = "btn btn-success" rel = "popover" data-content = "Create a message box to my site so simple!" Data-original-title = "Twitter Bootstrap pop-up "> hover pop </a>
</ Div>
<Div class = "well">
<A href = "#" id = "example_bottom" class = "btn btn-success" rel = "popover" data-content = "Create a message box to my site so simple!" Data-original-title = "Twitter Bootstrap pop-up "> hover pop </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>
View online examples
selector
Type selector value is a string, the default value is false. By using this option can Tooltip Object Authorization given target.
trigger
Type trigger value may be a string, the default is 'hover', focus and manual are other values can be used. This option is used to determine the tooltip (tooltip widget) how to get started. The following example demonstrates how to use focus option trigger Popover (pop-ups).
Examples
<H2> Use Bootstrap trigger option to create a pop-up box </ h2>
<Div class = "well">
<A href = "#" id = "example" class = "btn btn-success" rel = "popover" data-content = "Create a message box to my site so simple!" Data-original-title = "Twitter Bootstrap pop-up "> hover pop </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>
View online examples
title
Type title value can be string or function, the default value is ''. Title attribute value that is not displayed by default.
content
Type content value can be string or function, the default value is ''. Data-content attribute value that is not displayed by default. Here is an example of title and data-content options to use. This example also demonstrates how to use with multiple options.
Examples
<H2> Bootstrap using the pop-up title and content options </ h2>
<Div class = "well">
<a href="#" id="example" class="btn btn-success" rel="popover"> hover pop </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: "! Create a balloon for my site so simple"});
});
</ Script>
View online examples
delay
Type delay value may be a number or object, the default value is 0. This determines the display and hide popover (pop-up) latency, in milliseconds. If the value is set to a number, the wait time will be applied to the display and hide. If the value is set to an object, the structure of the delay: {show: 500, hide: 100}, which are 500 and 100 milliseconds.
Change popover (pop-up) the default tags and style
The default pop-up window labeled Popover is located bootstrap-popover.js file line number 92. As follows:
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, put your own mark.
Popover default style pop-up window at line number 3027-3118. You can modify it, you put your own style.
Click here to download the tutorial to use all the HTML, CSS, JS and image files.