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

This article focuses on "how to use hint tools in Bootstrap". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use prompt tools in Bootstrap.

These are about two controls: pop-up prompt (Popovers) and tooltip (Tooltips), both of which are simple in function and easy to use, and have a lot in common.

Pop-up prompt (Popovers)

1 exampl

1.1 points for consideration

Considerations when using the popover plug-in:

It must rely on bootstrap.bundle.min.js to work!

Popover are optional for performance reasons, so you must initialize them yourself.

1.2 enable pop-up windows anywhere

One way to initialize all popover on a page is to select them through their data-bs-toggle attribute:

Popovers

Click this button to pop up the prompt var popoverTriggerList = [] .slice.call (document.querySelectorAll ('[data-bs-toggle= "popover"])) var popoverList = popoverTriggerList.map (function (popoverTriggerEl) {return new bootstrap.Popover (popoverTriggerEl)})

1.3 use Container option

When some style on the parent element interferes with the popover, you need to specify a custom container so that the HTML of the popover is displayed in that element. This is no different from the previous one in display, except that an example-popover has been added to the button class.

Popovers

Click this button and pop up the prompt var popover = new bootstrap.Popover (document.querySelector ('.example-popover'), {container:' body'})

You can also use id, which seems to be easier to understand

Popovers

Click this button and pop up the prompt var popover = new bootstrap.Popover (document.querySelector ('# example-popover'), {container: 'body'})

2 change the pop-up direction

We can have pop-up messages in four directions: top, right, bottom, and left. It is also easy to use, as long as you add the data-bs-placement= "location" to the button property, where the location can be top, bottom, left, right.

It should be noted that the location to be displayed must have enough space, otherwise, it will automatically find the appropriate location, if you set the display at the top, but the top is already at the top of the browser, it will be displayed below.

Popovers

Default upper lower left right var popoverTriggerList = [] .slice.call (document.querySelectorAll ('[data-bs-toggle= "popover"])) var popoverList = popoverTriggerList.map (function (popoverTriggerEl) {return new bootstrap.Popover (popoverTriggerEl)})

3 close anywhere again

By default, click the button to display the prompt message, click this button again to hide the message, otherwise the message will be displayed all the time. If we want to click anywhere again to close the previously displayed prompt, we need to add a data-bs-trigger= "focus" attribute to the button and add trigger: 'focus' to the js file.

To achieve correct cross-browser and cross-platform behavior, you must use the a tag instead of the button tag, and you must also include the tabindex attribute.

Popovers

Click this button to pop up the prompt, click the blank to prompt to disappear var popoverTriggerList = [] .slice.call (document.querySelectorAll ('[data-bs-toggle= "popover"]') var popoverList = popoverTriggerList.map (function (popoverTriggerEl) {return new bootstrap.Popover (popoverTriggerEl) trigger: 'focus'}))

Tooltip (Tooltips)

Tooltips (Tooltips), which are very similar to pop-up prompt boxes (Popovers), are also optionally loaded and must be initialized yourself. Its display mode will also be automatically adjusted according to the reserved space. Unlike the pop-up prompt, the tooltip will be displayed when the mouse hovers over the button, and the mouse is automatically hidden without clicking.

1 tooltip effective code

Similar to pop-up tips, this code must be included in the page for the tooltip to take effect.

Var tooltipTriggerList = [] .slice.call (document.querySelectorAll ('[data-bs-toggle= "tooltip"]') var tooltipList = tooltipTriggerList.map (function (tooltipTriggerEl) {return new bootstrap.Tooltip (tooltipTriggerEl)})

2 sample tooltip

Tooltips are generally used on buttons and links to illustrate their functions, but they can also be used in pictures. The value of title is what is displayed over the mouse, and you can use the html element.

The link has a default title attribute, and its prompt text is displayed in the browser status bar, which is more intuitive.

Tooltip

Button prompt link prompt var tooltipTriggerList = [] .slice.call (document.querySelectorAll ('[data-bs-toggle= "tooltip"]')) var tooltipList = tooltipTriggerList.map (function (tooltipTriggerEl) {return new bootstrap.Tooltip (tooltipTriggerEl)})

3 where the tooltip is displayed

Like pop-up tips, four tooltip directions are supported, namely top, bottom, left, and right.

Toast message

Top prompt right prompt bottom prompt left prompt var tooltipTriggerList = [] .slice.call (document.querySelectorAll ('[data-bs-toggle= "tooltip"]')) var tooltipList = tooltipTriggerList.map (function (tooltipTriggerEl)) {return new bootstrap.Tooltip (tooltipTriggerEl)})

4 for tips in the article

Toast message

Recently, bilibili ushered in his 12th anniversary. Before that, bilibili made an inventory of many buzzwords, such as words like "awsl". Many friends have brushed them, and some of them even went out of circles, such as the latter wave. I noticed that bilibili officials often do some related popular science inventory. There is a push from time to time.

Var tooltipTriggerList = [] .slice.call (document.querySelectorAll ('[data-bs-toggle= "tooltip"]') var tooltipList = tooltipTriggerList.map (function (tooltipTriggerEl) {return new bootstrap.Tooltip (tooltipTriggerEl)})

It can be combined with general classes to make more effects.

The text part of both tips can use the general classes of html and bootstrap to set spacing, typesetting, font, color, etc., and you can try to make more cool effects on your own.

At this point, I believe you have a deeper understanding of "how to use hint tools in Bootstrap". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.