Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage. Refer to the below URL for more information on Bootstrap Tooltips.

• Tooltips Documentation

Enabling Tooltips

• Go to Appearance > Settings > Theme

• Under Bootstrap Settings select the Tooltips tab
  

  

• Select Tooltips (Enable tooltips everywhere)

• Click Save Configuration at the bottom of the page

Creating Tooltips

• Go to the page where you would like to add a Tooltip. The below code is an example of a Tooltip. For a LIVE example of this. Refer to https://drupal.maricopa.edu/example-pages/various-bootstrap-elements

  <button type="button" class="btn btn-secondary"
          data-bs-toggle="tooltip" data-bs-placement="top"
          data-bs-custom-class="custom-tooltip"
          data-bs-title="This top tooltip is themed via CSS variables.">
    Custom tooltip
  </button>

• Copy and paste this code