7.26. Bootstrap5 pop-up box

7.26.1. How to create a popup box ¶

By adding to elements


      data-bs-toggle="popover"

to create a pop-up box.


      title

the content of the property is the title of the pop-up box, and the


      data-bs- 
      content

property displays the text content of the pop-up box:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popup Title" data-bs-content="Popup Box Content">Click me multiple times</button>

Note: the pop-up box should be written in the initialization code of JavaScript.

The following examples can use pop-up boxes anywhere in the document:

Example ¶

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

7.26.2. Specify the location of the pop-up box ¶

By default, the pop-up box is displayed on the right side of the element.

You can use the ‘data bs placement’ attribute to set the direction of the pop-up box display:

top


      bottom


      left


      right

Example ¶

<a href="#" title="title" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="I am the content section">Click me</a>
<a href="#" title="title" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="I am the content section">Click me</a>
<a href="#" title="title" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="I am the content section">Click me</a>
<a href="#" title="title" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="I am the content section">Click me</a>

7.26.3. Close the pop-up box ¶

By default, the pop-up box closes after clicking on the specified element again, and you can use the


      data-bs-trigger="focus"

property to close the pop-up box by setting the area outside the mouse click element:

Example ¶

<a href="#" title="Cancel Popup" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click elsewhere in the document to close me">Click me</a>

Tip: if you want to display and remove the mouse over the element, you can use the data-bs-trigger property and set the value to “hover”

Example ¶

<a href="#" title="title" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="some content">Move the mouse over to me</a>

In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.