小图片工具提示

  • Z时代
  • 2024-01-10
  • 分类：问答

我目前即将设置我们的论坛并已制作验证系统，但不知道如何制作类似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); 
}

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

回答：

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

以上是 小图片工具提示 的全部内容， 来源链接： utcz.com/qa/265312.html

回到顶部