My datatables grid includes some font awesome icons to represent actions like edit, delete, etc.
Here's a visual representation of how they appear:
https://i.sstatic.net/W0VQi.png
Take a look at the accompanying HTML code:
<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>
I'm looking to display the text in the span as a tooltip without relying on jQuery, by utilizing CSS hover effects when hovering over the icons. Is this feasible?
I've experimented with various approaches, including this recent one, but unfortunately, no text is being displayed:
.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; }
}