Отображение всплывающей подсказки при наведении курсора на значок font awesome

У меня есть несколько отличных иконок шрифтов в моей таблице данных, чтобы заменить текст для редактирования, удаления и т. д.

Вот как они выглядят

Вот HTML

 <td>
     <a asp-action = "Edit" asp-route-id = "@item.DutchAuctionTenderId">
         <i class = "fa fa-pencil"></i>
         <span class = "tooltip-text">
             Edit Row
         </span>
     </a> |
     <a  asp-action = "Details" asp-route-id = "@item.DutchAuctionTenderId">
         <i class = "fa fa-list"></i>
         <span class = "tooltip-text">
             Row Details
         </span>
     </a> |
     <a  asp-action = "Delete" asp-route-id = "@item.DutchAuctionTenderId">
         <i class = "fa fa-trash-o"></i>
         <span class = "tooltip-text">
             Delete Row
         </span>
     </a>
 </td>

Я хочу показать текст в диапазоне, как всплывающую подсказку, без использования jquery, используя css hover, когда пользователь наводит курсор на значки. Это выполнимо?

Я пробовал несколько способов, включая эту последнюю итерацию, но текст не отображается.

.tooltip-text {
    width: 145px;
    position: absolute;
    display: none;
    background: ghostwhite;
    padding: 10px;
    font-size: 12px;
    border-radius: 3px; 
    transition: opacity 1s ease-out;
}
.fa {
    font-size: 16px;
    transition: .5s ease-in-out;
}

.fa-fa-trash-o:hover + .tooltip-text, .fa-fa-list:hover + .tooltip-text, .fa-fa-pencil:hover + .tooltip-text {
    display: block;
    color: black;
    animation: fadeIn 2s;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}