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 role="button" 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>

If using CKEditor 5 to add your Tooltip, refer back to creating Text Formats on how to switch between Basic HTML and Full HTML mode. CKEditor 5 must be in FULL HTML mode for tooltips to work on your page.