Template:Tooltip

<style> /* Base container styling */ .custom-tooltip {

   position: relative;
   display: inline-block;
   cursor: help;

}

/* Style the text you hover over */ .tooltip-trigger {

   border-bottom: 1px dashed #666;

}

/* Hide the tooltip text by default and set styling */ .custom-tooltip .tooltip-content {

   visibility: hidden;
   position: absolute;
   bottom: 125%; /* Positions it above the text */
   left: 50%;
   transform: translateX(-50%);
   background-color: #222; /* Dark background */
   color: #fff;            /* White text */
   text-align: center;
   padding: 6px 10px;
   border-radius: 4px;
   font-size: 0.9em;
   white-space: nowrap;
   z-index: 100;
   box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
   opacity: 0;
   transition: opacity 0.2s ease-in-out;

}

/* Create a small arrow pointing down under the tooltip box */ .custom-tooltip .tooltip-content::after {

   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #222 transparent transparent transparent;

}

/* Show the tooltip when hovering */ .custom-tooltip:hover .tooltip-content {

   visibility: visible;
   opacity: 1;

} </style>{{{1}}}{{{2}}}