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

Versions Compared

Old Version 4

New Version 5

Key