This is the style code that is already located in The Auffice’s CSS files. If you are using this to build a different site, you will have to add this to your sites style.css file.

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

This is the code to use on your page. The image is our blue question mark and you can change it to any image you want, or replace the image with words.

<div class="tooltip"><img src="https://auffice.org/wp-content/uploads/2024/09/Untitled-design.png" width="27px" height="27px" />
<span class="tooltiptext">REPLACE THESE WORDS THIS IS WHAT SHOWS UP INSIDE THE BLACK BOX WHEN YOU HOVER OVER</span></div>

REPLACE THESE WORDS THIS IS WHAT SHOWS UP INSIDE THE BLACK BOX WHEN YOU HOVER OVER

<div class="tooltip">Hover Over Me
<span class="tooltiptext">REPLACE THESE WORDS THIS IS WHAT SHOWS UP INSIDE THE BLACK BOX WHEN YOU HOVER OVER</span></div>