Text Tooltip!
View CSS
View HTML
/* resource - https://www.w3schools.com/howto/howto_css_tooltip.asp */
.tooltip {
position: relative;
display: inline-block;
cursor:pointer;
}
.tooltip span {
padding: 3px 15px 3px 10px;
border: 1px solid #353535;
border-radius: 20px;
}
.tooltip .tooltip-top {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltip-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltip-top {
visibility: visible;
opacity: 1;
}
.tooltip .fa-question-circle {
margin-right: 10px;
}
<div class="tooltip"><span><i class="fas fa-question-circle"></i>Text</span>
<span class="tooltip-top">Tooltip!</span>
</div>