如何向图像跨度中添加辅助工具提示？

Question

小提琴

我在CSS中做了一个工具提示，当你悬停在他们的图片上时，它会显示en employee的名字。

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

但是，我需要一个辅助工具提示，它显示在带有员工标题的图片下面。

我尝试过添加一个名为“customToolTip2”的二级类，但这只是覆盖了第一个类，并且只有一个显示。

我该怎么做？

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