如何添加輔助工具提示到圖像範圍？

Question

Fiddle

我在CSS中提供了一個工具提示，當你將鼠標懸停在他們的圖片上時，它顯示en員工的姓名。

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