Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your sitePopovers 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
...
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
Code Block <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
| Info |
|---|
If using CKEditor to add your Tooltip, refer back to creating Text Formats on how to switch between Basic HTML and Full HTML mode. CKEditor must be in FULL HTML mode for tooltips to work on your page. |