Versions Compared

Old Version 8

changes.mady.by.user Matthew Gary Page

Saved on

compared with

New Version 9

changes.mady.by.user Matthew Gary Page

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storageBootstrap 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.

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

...

  • 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

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

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.