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