小图片工具提示

Question

我目前即将设置我们的论坛并已制作验证系统，但不知道如何制作类似Facebook的工具提示。一旦将鼠标悬停在检查图像上，您将看到某种文本。

我已经尝试了一些方法来实现它，但没有奏效。

GoDaddy's Facebook Page

HTML

img标签包含这些：

data="BroHosting confirmed that this profile is an authentic for person, media, brand or company." class="tip" 

CSS /样式

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

您是否有可能的修补程序或其他想法或建议？

Answer 1

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