Bootstrap implements the prompt box and pop-up box effects.

Bootstrap implements the prompt box and pop-up box effects.

First, let's talk aboutTooltip)Usage

Style file:

LESS version: corresponding to the source file tooltips. less

<Style id = "jsbin-css"> body {padding: 100px ;}. btn {margin: 20px 10px 20px ;} </style> 
You can use the value of the title attribute to define the prompt information (you can also use the custom property data-original-title to set the prompt information ).
The data-placement custom attribute is used to control the position of the prompt box. data-placement has four values: top, right, bottom, and left, it indicates that the prompt box appears at the top, right, bottom, and left.
Another important parameter is data-toggle = "tooltip ".
Note the following:

1. If both data-original-title and title definitions are set, the priority of data-original-title is higher than that of title. If the data-original-title value is null, the title value is used as the content of the prompt message.
2. The trigger method of the prompt box in the Bootstrap framework is slightly different from the plug-in described earlier. It cannot be directly triggered by custom attribute data. It must be triggered by JavaScript code.
Prompt box-Other Custom Attributes


Prompt box-JS Parameter Setting Method


You should know that JQuery UI has a pop-up box component of dialog, which has rich functions. Similar to the dialog of jQuery UI, the Bootstrap has a built-in pop-up box component. Open the bootstrap document and you can see that dialogis directly embedded in bootstrap.jsand bootstrap.css. That is to say, as long as we introduce the bootstrap file, we can directly use its dialog component. Is it very convenient. In this article, we will introduce the use of bootstrap dialog with the newly added editing function. Let's just talk about how to use it.
Popover)
The difference is that in addition to the title, the content section is added to the pop-up box. This is not in the prompt box.
Style file:
☑LESS version: the source file is popovers. less.
<Button type = "button" class = "btn-default" id = "myPopover"> slam me </button> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <script> $ (function () {$ ('# mypover '). popover ({title: "I am the title of the pop-up box", content: "I am the content of the pop-up box", placement: "right"}) ;}); </script>
Pop-up box-structure of the pop-up box

The Popover in the pop-up box has an additional content compared to the tooltip in the prompt box, so data-content is used here to define the content in the pop-up box. You can also use tags to create tags,
When you call pover, the options parameter is the same as the custom attribute starting with data-in the declarative selection. Can be set in options.
<Button type = "button" data-toggle = "popover" class = "btn-default" id = "myPopover"> hover your mouse over the display dialog box </button> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <script> // defines the pop-up box through js $ (function () {$ ('# mypover '). popover ({title: "I am the title of the pop-up box", content: "I am the content of the pop-up box", placement: "top", trigger: "hover"}) ;}); </script>

Pop-up box-similarities and differences between the prompt box and the pop-up box

The default trigger events of tooltip in the prompt box are hover and focus, and the pop-up box popover is click
The tooltip in the prompt box has only one content (title), and the pop-up box can not only set the title, but also set the content (content)
Tooltip template in the prompt box:
<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div></div>
The popover template is as follows:
<div class="popover" role="tooltip">  <div class="arrow"></div>  

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.