Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to use popover in bootstrap, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

In bootstrap, the popover plug-in is used to generate pop-ups for specified content and tags. You can add pop-ups using the data attribute and JavaScript, with syntax of "data-toggle=" popover "" and "$(element) .popover (options)", respectively.

Operating environment of this tutorial: Windows7 system, bootstrap3.3.7 version, DELL G3 computer

What is the use of popover in bootstrap

A pop-up box (Popover), similar to a tooltip (Tooltip), provides an extended view. To activate the pop-up box, the user can simply hover the mouse over the element. The contents of the pop-up box can be fully populated with Bootstrap data API (Bootstrap Data API). This method relies on tooltips (tooltip).

Popover plug-ins generate content and tags as required, and by default place pop-up boxes (popover) after their trigger elements. You can add a pop-up box (popover) in two ways:

Through the data attribute: to add a popover, simply add data-toggle= "popover" to an anchor / button tag. The title of the anchor is the text of the popover. By default, the plug-in sets the pop-up box (popover) at the top.

Examples are as follows:

Please hover over mine

Enable the pop-up box (popover) via JavaScript: JavaScript:

Examples are as follows:

$('# identifier') .popover (options)

Unlike the drop-down menus and other plug-ins discussed earlier, the Popover plug-in is not a pure CSS plug-in. To use the plug-in, you must activate it (read javascript) using jquery. Use the following script to enable all pop-ups (popover) on the page:

$(function () {$("[data-toggle='popover']"). Popover ();}); Thank you for reading this article carefully. I hope the article "how to use popover in bootstrap" shared by the editor will be helpful to you. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.