Question

I have made a fiddle: http://jsfiddle.net/ATdRD/

Can anyone fix this or spot why this isn’t working??

When the user hovers over the image I’d like for the data-title to appear for which i can style like a tooltip

Answer 1

It works if you wrap it in a p tag and give it some positioning:

<p class="kudoIcon" data-title="Admin">
    <img src="http://www.google.co.uk/images/srpr/logo3w.png" alt="Wapple" />
</p>

CSS

.kudoIcon {
    position: relative;
}

.kudoIcon:hover:after{
    content: attr(data-title);
    position: absolute;
    top:100px;          /*ADDED*/
    left:100px;         /*ADDED*/
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
    z-index: 1000;
}

Example: http://jsfiddle.net/ATdRD/2/

Semantically, it would probably be better to place it inside a div or a figure tag, as @BoltClock mentioned.