Приветсвую. Демонстрация работы: https://codepen.io/Woody19/pen/dJwpXJ
Имеется следующее построение checkbox-ов на сайте:
<li>
<label class="cb-input">
<input class="cb-input__checkbox" type="checkbox">
<span class="cb-input__check"></span>
<span class="cb-input__label">Calipso</span>
</label>
<label class="found-items"></label>
CSS лэйбла found-items:
.filter-menu li:hover .found-items {
display: block;
position: absolute;}
.filter-menu .found-items::before {
content: "Найдено 230";
position: absolute;
left: 104px;
top: -30px;
text-align: center;
z-index: 1;
padding-top: 15px;
width: 122px;
height: 21px;
line-height: 5px;
font-weight: 600;
color: rgb(62, 119, 199);
font-size: 16px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px inset;
background: rgb(255, 255, 255);
border-width: 3px;
border-style: solid;
border-color: rgb(62, 119, 199);
border-image: initial;
}
.filter-menu .found-items:after {
content: '';
height: 13px;
width: 13px;
top: -21px;
left: 89px;
z-index: 1;
display: block;
background: white;
border: 3px solid #3e77c7;
border-right-width: 0;
border-bottom-width: 0px;
transform-origin: 100% 0;
-ms-transform: rotate(-45deg)!important;
-webkit-transform: rotate(-45deg)!important;
transform: rotate(-45deg)!important;
position: absolute;}
При наведении на элемент списка должен появляться где отображено количество найденных товаров, проблема в том что спаны с текстом имеют разную ширину (в зависимости от количества символов).
Вопрос: как можно сделать при помощи Jquery/Vanila чтобы данный элемент выводился относительно ширины Calipso спана с текстом?