This is the 27th day of my participation in Gwen Challenge

“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day.

27.1 an overview of the

There are two controls: Popovers and Tooltips, both of which are very simple to use and have a lot in common.

27.2 Popovers

27.2.1 sample

27.2.1.1 Precautions

Note the following when using the Popover plugin:

  • It must rely on bootstrap.bundle.min.js to work!
  • Popovers are optional for performance reasons, so you must initialize them yourself.

27.2.1.2 Enable pop-ups anywhere

One way to initialize all popovers on a page is to select them via their data-bs-toggle property:

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. /bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>Popovers</title> </head> <body> <div class="container"> <br><br><br><br> <br><br>< button type="button" class=" BTN bTN-LG bTN-danger "data-bs-toggle="popover" title=" Data-bs-content =" What tips do you want to tell people? You can write it down here!" </button> </div> <script SRC =".. /bootstrap5/bootstrap.bundle.min.js" ></script> <script> var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function  (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) }) </script> </body> </html>Copy the code

27.2.1.3 Using the container option

When some style on the parent element interferes with popover, you need to specify a custom container so that the HTML for popover is displayed in that element. This is the same as the previous one, except that an example popover is added to the Button class.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. /bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>Popovers</title> </head> <body> <div class="container"> <br><br><br><br> <button type="button" class="btn btn-lg btn-danger example-popover" data-bs-toggle="popover" Title =" Prompt title "data-bs-content=" What prompt do you want to tell others? You can write it down here!" </button> </div> <script SRC =".. /bootstrap5/bootstrap.bundle.min.js" ></script> <script> var popover = new bootstrap.Popover(document.querySelector('.example-popover'), { container: 'body' }) </script> </body> </html>Copy the code

You can also use id, so it looks a little bit more intuitive

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. /bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>Popovers</title> </head> <body> <div class="container"> <br><br><br><br> <button type="button" id="example-popover" class="btn btn-lg btn-danger" data-bs-toggle="popover" Title =" Prompt title "data-bs-content=" What prompt do you want to tell others? You can write it down here!" </button> </div> <script SRC =".. /bootstrap5/bootstrap.bundle.min.js" ></script> <script> var popover = new bootstrap.Popover(document.querySelector('#example-popover'), { container: 'body' }) </script> </body> </html>Copy the code

27.2.2 Changing the Eject Direction

We can have pop-ups in four directions: top, right, bottom, and left. It is also easy to use by adding data-bs-placement=” position “to the button property, where the position can be top, bottom, left, or right.

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

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. /bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>Popovers</title> </head> <body> <div class="container"> <br><br><br><br> <br><br>< button type="button" class=" BTN bTN-LG bTN-danger "data-bs-toggle="popover" title=" Data-bs-content =" What tips do you want to tell people? You can write it down here!" > default </button> <button type="button" class=" BTN bTN-LG bTN-danger "data-bs-toggle="popover" data-bs-placement="top" Title =" Prompt title "data-bs-content=" What prompt do you want to tell others? You can write it down here!" </button> <button type="button" class=" BTN bTN-LG btn-danger" data-bs-toggle="popover" data-bs-placement="bottom" Title =" Prompt title "data-bs-content=" What prompt do you want to tell others? You can write it down here!" </button> <button type="button" class=" BTN bTN-LG btn-danger" data-bs-toggle="popover" data-bs-placement="left" Title =" Prompt title "data-bs-content=" What prompt do you want to tell others? You can write it down here!" </button> <button type="button" class=" BTN bTN-LG bTN-danger "data-bs-toggle="popover" data-bs-placement="right" Title =" Prompt title "data-bs-content=" What prompt do you want to tell others? You can write it down here!" </button> < div> <script SRC =".. /bootstrap5/bootstrap.bundle.min.js" ></script> <script> var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function  (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) }) </script> </body> </html>Copy the code

27.2.3 Close again anywhere

By default, click the button to display the prompt message, click the button again to hide the message, otherwise the message will remain displayed. If we want to close the previously displayed prompt by clicking anywhere again, we need to add a data-bs-trigger=”focus” attribute to the button and add trigger: ‘focus’ to the JS file.

For proper 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.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. /bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>Popovers</title> </head> <body> <div class="container"> <br><br><br><br> <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" Data-bs-trigger ="focus" title=" prompt title "data-bs-content=" What prompt do you want to tell others? You can write it down here!" </a> </div> <script SRC =".. /bootstrap5/bootstrap.bundle.min.js" ></script> <script> var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function  (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) trigger: 'focus' }) </script> </body> </html>Copy the code

27.3 Tooltips (Tooltips)

Tooltips, very similar to Popovers, are also optional and must be initialized themselves. Its display mode will also be adjusted automatically according to the reserved space. Unlike pop-up prompts, tooltips are displayed when the mouse hovers over the button, and hide when the mouse moves away without clicking.

27.3.1 Effective code of tooltip

Similar to a pop-up prompt, 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)
})
Copy the code

27.3.2 Examples of Tool Tips

Tooltips are usually used for buttons and links to explain their functions, but they can also be used for images. The title value is what you hover over, and you can use HTML elements.

Links have a default title property, and the prompt text is displayed in the browser status bar, which is more intuitive.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > tooltips < / title > < / head > < body > < div class =" container "> <br><br><br><br> <button type="button" class=" BTN btn-secondary" data-bs-toggle="tooltip" title=" this is button tip" > Button tip </button> <a href="#" data-bs-toggle="tooltip" title=" this is a link "> </a> </div> <script SRC =".. /bootstrap5/bootstrap.bundle.min.js" ></script> <script> var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function  (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) </script> </body> </html>Copy the code

27.3.3 Location of tooltip Display

Support for four tooltip directions: top, bottom, left, and right.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > toast message < / title > < / head > < body > < div class =" container "> <br><br><br><br> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" </button> <button type="button" class=" BTN btn-secondary" data-bs-toggle="tooltip" Data-bs-placement ="right" title=" right" > </button> <button type="button" class=" BTN bTN-secondary" Data-bs-toggle ="tooltip" data-BS-placement ="bottom" title=" bottom tip" > bottom tip </button> <button type="button" class=" BTN" Btn-secondary "data-bs-toggle="tooltip" data-bS-placement ="left" title=" left" > left </button> </div> <script SRC =".. /bootstrap5/bootstrap.bundle.min.js" ></script> <script> var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function  (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) </script> </body> </html>Copy the code

27.3.4 Used for hints in articles

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > toast message < / title > < / head > < body > < div class =" container "> <br><br>< div class=" bD-example tooltip-demo"> < P class=" fraternal "> recently <a href="#" data-bs-toggle="tooltip" <a href="#" data-bs-toggle="tooltip" href="#" data-bs-toggle="tooltip" </a> <a href="#" data-bs-toggle="tooltip" title=" a modern reference "> </a> I noticed that the official of STATION B would also do some relevant popular science inventory and so on. </p> </div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> <script> var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function  (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) </script> </body> </html>Copy the code

27.4 More effects can be made by combining generic classes

You can use the common HTML and Bootstrap classes to set the spacing, typography, font, color, etc. You can try it out for more cool effects.

Today’s course is here, please pay attention to me, timely learning an old Liu original “Bootstrap5 zero foundation to master” section 28 Bootstrap5 Toasts component usage.

If this article is helpful, please feel free to like it!