I am currently about to setup our forum and already made a verification system, but wondering how to make a tooltip just like Facebook have. Once you mouse over the check image, you will see some sort of text.
I already tried some way to achieve it but did not work.
HTML
The img tag contains these:
data="BroHosting confirmed that this profile is an authentic for person, media, brand or company." class="tip"
CSS /Style
img:hover {
color: red;
position: relative;
}
img[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5);
}
Do you have a possible fix or other idea or suggestion maybe?
.check {
position: relative;
display: inline-block;
background-color: #5890ff;
width: 12px;
height: 12px;
border-radius: 100%;
color: #000;
text-decoration: none;
}
.check:after {
content: attr(data-tooltip);
position: absolute;
top: 0;
left: 14px;
width: 100px;
background-color: #000;
color: #FFF;
font-family: Arial, sans-serif;
font-size: 14px;
padding: 5px;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease-in-out;
will-change: opacity;
}
.check:hover:after {
opacity: 1;
pointer-events: auto;
}
<a href="#" class="check" data-tooltip="Lorem ipsum dolor sit amet"></a>