CSS проблема, всплывающая подсказка теперь отображается в моем jsp

Question

По какой-то причине я не могу получить stock.key и stock.value для отображения на экране. Ошибка определенно происходит из моего CSS, и, вероятно, из всплывающей подсказки, но я не знаю почему. Если я изменю класс div с всплывающей подсказки «Доступный круг» на «Доступный круг», отобразятся необработанные данные. Поэтому я предполагаю, что ошибка происходит из всплывающей подсказки.

html код:

<td style="display:flex;align-items: center;justify-content: center;">
<div class="circle <c:choose><c:when test="${prod.available}">available tooltip</c:when><c:otherwise>notAvailable</c:otherwise></c:choose>">
     <c:if test="${prod.available}">
          <span class="tooltiptext"><c:forEach items="${prod.stockCapitalized}" var="stock">
               <p style="white-space: nowrap;"><span>${stock.key}
          </span>
          <span>${stock.value}</span>
               </p>
          </c:forEach></span>
     </c:if>
</div>

css код:

div.circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

div.circle.available {
    border: 2px solid #679403;
    background-color: #679403;
}

div.circle.notAvailable {
    border: 2px solid #d01f1f;
    background-color: #d01f1f;
}


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

/* Tooltip text */
.tooltip .tooltiptext {

    background-color: #232323e6;
    color: #fff;
    text-align: left;
    padding: 5px 10px;
    border-radius: 5px;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 1;
}

.available.tooltip .tooltiptext p {
    /*display: flex;*/
    /*flex-direction: row;*/
    /*flex-wrap: nowrap;*/
    /*justify-content: space-between;*/
}

.available.tooltip .tooltiptext p span:first-child {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
}

.available.tooltip .tooltiptext p span:first-child:after {
    content: '............................';
}

.available.tooltip .tooltiptext p span:nth-child(2) {
    display: inline-block;
}

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