Tooltips

Bootstrap Tooltips are often used to specify extra information about something when the user moves the mouse pointer over an HTML element. Refer to the below URL for more information on Bootstrap Tooltips.

• https://mcccd-web.github.io/docs/5.2/components/tooltips/

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

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

 <span class="text-decoration-underline text-secondary" 
          data-bs-custom-class="custom-tooltip" data-bs-placement="top" 
          data-bs-title="This top tooltip is themed via CSS variables." 
          data-bs-toggle="tooltip">
  Custom tooltip
 </span>