I'm in the process of setting up our forum and have already implemented a verification system. However, I'm interested in creating a tooltip similar to the one on Facebook. When you hover over the check image, text will appear.
I've tried various methods to achieve this but haven't had any success.
Check out GoDaddy's Facebook Page for reference
HTML
The img tag should look like this:
data="BroHosting confirmed that this profile is authentic for individuals, media, brands, or companies." class="tip"
CSS/Styling
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);
}
Any suggestions for fixing this issue or alternative ideas are greatly appreciated!