Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to achieve the right suspension box in bootstrap". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In bootstrap, you can use the popover plug-in to implement the right suspension box, which is used to provide an extended view. You can set the display direction of the suspension box by setting the "data-placement" property in the element, and the syntax is "".

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

How to realize the right suspension frame with bootstrap

Bootstrap pop-up box (Popover) plug-in

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).

Usage

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.

Please hover over mine

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

$('# 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 ();})

The following example demonstrates the use of a pop-up box (Popover) plug-in through the data property.

Bootstrap instance-Popover$ on the right side of the Popover plug-in (function () {$("[data-toggle='popover']") .popover ();})

Output result:

This is the end of the content of "how to achieve the right suspension box in bootstrap". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.