如何在图像范围中添加辅助工具提示？

Question

Fiddle

我在CSS中制作了一个工具提示，当您将鼠标悬停在他们的照片上时，会显示该员工的姓名。

HTML

<span class="customToolTip" atitle="Employee" btitle="CEO"><img src="http://placehold.it/150x150" alt="Employee"/></span>

CSS

.customToolTip{
    display: inline;
    position: relative;
}

.customToolTip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 135px;
    color: #fff;
    content: attr(title);
    left: 1%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    content: attr(atitle);
    width: 88px;
}

但是，我想要一个辅助工具提示，显示该图片与员工的标题。

我尝试添加一个名为＆＃39; customToolTip2＆＃39;但这只是覆盖了第一个，只有一个显示。

我该怎么做？

Answer 1

你可以使用之前使用，如下面的代码所示：

.customToolTip:hover:before{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: -10px;
    color: #fff;
    content: attr(title);
    left: 1%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    content: attr(btitle);
    width: 88px;
}