Промер создания и оформления простого тултипа на CSS

Тултип всплывает при наведении на элемент.
.delivery .tooltip {
position: relative;
display: inline-block;
}
.delivery .tooltip .tooltiptext {
white-space: normal;
visibility: hidden;
width: 220px;
background-color: white;
color: #000;
text-align: center;
border-radius: 6px;
/*padding: 5px 10px;*/
border: 1px solid #038aec;
padding: 10px;
position: absolute;
z-index: 1;
left: -123px;
font-size: 13px;
}
.delivery .tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="delivery">
<span class="tooltip">
<span>возможна</span><i class="tip fa fa-question-circle"></i><br />
<div class="tooltiptext">
Возможность <b>срочной доставки</b> зависит от наличия свободных водителей. <br>
</div>
</span>
</div>