小圖片工具提示

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>