I'm trying to add a custom tooltip (custom HTML field with CSS styling), because the built-in tooltip doesn't allow HTML styling. I can't get the actual tooltip window to appear over everything (like the built-in tooltip). It seems to be inheriting the field height.

Here's my HTML on the field:

<div class="tooltipT">(?)
  <span class="tooltiptext">Date Requisition Requested – When the Recruitment Request Intake Form was submitted or recruitment was requested (if form was not used)<br>    Date Requisition Opened – When the requisition was created in ATS and began accepting applications.<br>    Date Requisition Placed on Hold – When the requisition changed to "limited access," stopping new applications.<br>     Date Recruitment Completed/Filled – If filled, enter the last hire’s start date; if closed without hiring, enter the closure decision date. </span>
</div>

And the associated CSS:
 

/* Tooltip container */
.tooltipT {
  position: relative;
  display: inline-block;
  color: #555555;
}

/* Tooltip text */
.tooltipT .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: #D0EAFF;
  color: #555555;
  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 */
.tooltipT:hover .tooltiptext {
  visibility: visible;
}

I've tried changing the z-index of both the textbox and hover css. I've also tried assigning it the same container class as the built-in tooltip ("cf-tooltip").

Any help would be appreciated!

Thank you!