<div class="wrapper">
  <img src="https://uploads-ssl.webflow.com/649c7f9a7739b1da3f52cb29/650ca0f162b5c62b83930c15_Zenyth Assessment_Logo-01.svg" width="200px" alt="Zenyth logo">
  <h1>Accessible Tooltip Pattern</h1>
  <form>
    <label for="services">Service Options</label>
    <div class="tooltip-wrapper">
    <div id="tooltip" class="tooltip" tabindex="0" role="button" aria-label="Keyboard Instructions" aria-describedby="tooltiptext">
      <i class="fas fa-question-circle" aria-hidden="true"></i>
    </div>
    <span class="tooltiptext" id="tooltiptext" role="tooltip">Select multiple options by holding crtl + space</span>

    </div>
    <select multiple name="services[]" class="form-field" id="services" size="4">
      <option value="Website Audit">Website Audit</option>
      <option value="Mobile App Audit">Mobile App Audit</option>
      <option value="Training and Support">Training and Support</option>
      <option value="Compliance Monitoring">Compliance Monitoring</option>
    </select>
  </form>
  <h2>WCAG 2.1 AA Tooltip Requirements:</h2>
  <ul>
    <li>Tooltip Text must have role="tooltip"</li>
    <li>Tootlip must display on hover & focus</li>
    <li>Tooltip must be dismissible with ESC key - if it covers any other content on any screen size.</li>
    <li>Tooltip text must be associated with UI control. Use aria-describedby to associate the tooltip with the UI control.</li>
    <li>Tooltip text must be persistently visible while mouse hovers over tooltip text.</li>
  </ul>
  <p>For more information you can reach a friendly accessibility expert at <a href="https://zenythgroup.com/contact" target="_blank">Zenyth</a></p>
</div>
* {
  font-style: assistant;
}
.wrapper {
  margin: 0 auto 2.5em;
  max-width: 600px;
}
h1 {
  padding-bottom: 25px;
}
form {
  margin: 0 auto 2.5em;
  max-width: 400px;
}
label {
  display: inline-block;
  font-weight: bold;
  font-size: 1.2em;
}
select {
  display: block;
  overflow-y: hidden;
  width: 50%;
}
select option {
  padding: 3px;
}
#tooltip {
  position: relative;
  display: inline-block;
}

.tooltiptext {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 2px);
  
  width: 200px;
  background-color: #5b616b;
  border-radius: 6px;
  padding: 8px 14px 8px 3px;
  
  font-size: 14.5px;
  line-height: 1.8;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  text-align: center;
  
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  
  z-index: 1;
}

.tooltiptext.visible {
  opacity: 1;
  visibility: visible;
}
.tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.close-btn {
  position: absolute;
  top: 4px;
  right: 0px;
  display: inline-block;
  margin-right: 3px;
  border: none;
  background: transparent;
  color: #fff;
}

.tooltip-wrapper button:focus-visible {
    outline-color: #5490eb !important;
    outline-style: auto !important;
    outline-offset: 4px !important;
    outline-width: 4px !important;
}

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}
$(document).ready(() => {
  // Show the tooltip on hover of .tooltip-wrapper
  $(".tooltip-wrapper").on("mouseenter", function () {
    const tooltiptext = $(this).find(".tooltiptext");
    tooltiptext.addClass("visible");
  });

  // Hide the tooltip when leaving .tooltip-wrapper
  $(".tooltip-wrapper").on("mouseleave", function () {
    const tooltiptext = $(this).find(".tooltiptext");
    tooltiptext.removeClass("visible");
  });

  // Leave the existing focus and blur functions for keyboard navigation
  $(".tooltip").on("focus", function () {
    const tooltip = $(this).next(".tooltiptext");
    tooltip.addClass("visible");
  });

  $(".tooltip").on("blur", function () {
    const tooltip = $(this).next(".tooltiptext");
    tooltip.removeClass("visible");
  });
  
  // Dismiss the tooltip when the Escape key is pressed
  $(document).on("keyup", function (event) {
    if (event.key === "Escape") {
      const visibleTooltip = $(".tooltiptext.visible");
      if (visibleTooltip.length > 0) {
        visibleTooltip.removeClass("visible");
      }
    }
  });
});

External CSS

  1. https://pro.fontawesome.com/releases/v5.10.0/css/all.css
  2. https://fonts.googleapis.com/css?family=Assistant

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js