在悬停在字体真棒图标上显示工具提示

Question

我的数据表网格上有一些字体很棒的图标，用于替换编辑，删除等文本。

这是他们看起来的样子

这是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>

我希望在用户将鼠标悬停在图标上时使用css悬停显示跨度中的文本，作为工具提示，而不使用jquery。这可行吗？

我尝试了很多方法，包括最后一次迭代，但没有显示任何文字。

.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; }
}

Answer 1

为什么不用这种方式：
将title属性添加到i

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-trash-o" title="your tooltip"></i>

并以这种方式设置样式i[title]{...}

Answer 2

您正在＆＃34; .fa＆＃34;

之后使用.fa-fa-trash-o:hover 删除＆＃34; - ＆＃34;

将其更改为.fa.fa-trash-o:hover

.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;
}