Bootstrap

Tooltips

this script is needed before the close the <body> tag

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

you also need to the following script before the close the <body> tag

    <!-- initiating the tooltip -->
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =>
          new bootstrap.Tooltip(tooltipTriggerEl)
          );
      });
    </script>

tooltip code:

<span data-bs-toggle="tooltip" title="/tʀistɛs/"></span>

the tooltip can be formatted with CSS:

  <style>
    .tooltip-inner {
      background-color: #fff !important; /* white background */
      color: #000 !important;           /* black text */
      font-size: 1.5rem;               /* increase font size (adjust as needed) */
      padding: 0.5rem 0.75rem;          /* optional: adjust padding */
      border: 1px solid rgba(0, 0, 0, 0.15); /* optional: add a subtle border */
    }
  </style>

Formatting <pre><code>

CSS code for formatting:

pre {
  background-color: #F0F8FF; /* AliceBlue - you can adjust the shade */
  padding: 1rem;            /* Optional: adds some spacing inside the box */
  border: 1px solid #000;   /* Optional: adds a black border for definition */
  width: 100%;              /* Ensures it spans the full width of its parent */
  margin: 0;                /* Optional: removes default margins if needed */
}

Inserting multiple audio files

HTML

<span onclick="playAudio('audio01')">your text.</td> /* you can add more <span> tags */
<audio id="audio01" src="media/01-your text.m4a"></audio> /* you can add more <audio> tags */

  function playAudio(id) {
    var audio = document.getElementById(id);
    audio.play();
  }
  function myFunction() {
    var x = document.getElementById("h");
    if (x.style.display === "none") {
      x.style.display = "table-row-group";
    } else {
      x.style.display = "none";
    }
  }

Bootstrap 5.3

Tooltips

Formatting <pre><code>

Inserting multiple audio files