Page Comparison

...

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<popover
</button>

Copy and paste this code

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

Code Block

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

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

Versions Compared

Old Version 4

New Version Current

Key