Popovers

Popovers are similar to tooltips. When a user clicks on an element, a pop-up box appears. The difference is that popovers can contain much more content. Refer to the below URL for more information on Bootstrap Popovers.

• https://mcccd-web.github.io/docs/5.2/components/popovers/

Enabling Popovers

• Go to Appearance > Settings > Theme

• Under Bootstrap Settings select the Popovers tab

• 

• Select Popovers (Enable popovers everywhere)

• Click Save Configuration at the bottom of the page

Creating Popovers

• Go to the page where you would like to add a Popover. The below code is an example of a Popover. For a LIVE example of this. Refer to https://drupal.maricopa.edu/example-pages/various-bootstrap-elements

  <button type="button" class="btn btn-lg btn-danger" 
          data-bs-toggle="popover" 
          data-bs-title="Popover title" 
          data-bs-content="And here's some amazing content. It's very engaging. Right?">
    Click to toggle popover
  </button>

• Copy and paste this code

If your using a Popover as an HTML link. Copy and paste the below code:

<span class="text-decoration-underline text-secondary"
          data-bs-toggle="popover"
          data-bs-title="Popover title"
          data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Click to toggle popover
</span>