XF 1.2 Tooltips on userBanner images

[chickenputty]

Overview: I'm trying to apply tooltips to userBanners which are purely images.
Site w/ banners: http://mcbrawl.com/threads/10860/

I'm styling user banners to be only images like so,

.userBanner_creative {
background: url("http://i.imgur.com/mrJThXa.png") no-repeat;
height: 16px;
width: 16px;
text-indent: -10000em;
display: inline-block;
}

(Hotlinking is just temp)

However, I'm also trying to add a tooltip when you hover over the image using,

.tooltip{
    display: inline;
    position: relative;
}
.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 100px;
}
.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

I've accomplished this on the banner style "Creative Manager" by making the user banner text:

<a title="Creative Manager" class="tooltip"><font color="#000">Creative Manager</font></a>

But, I cannot think of how I would tooltip the image though because the banner text is removed and I need to apply the tooltip css to the background image.
Could anyone help me out with this?