Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. 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 using CKEditor, refer back to creating Text Formats on how to switch between Basic HTML and Full HTML mode.

  • No labels