Customizing how a ToolTip is displayed using CSS

I was messing around with various ways to customize the look of a tooltip and happened to stumble across an incredibly simple solution utilizing CSS.  In this particular instance, the "tooltip" will appear to the immediate right of the anchor tag's text in a nice, friendly-looking blue box.  Nothing fancy, but something you could easily build on if you like.

Here's the code:

<style>
        .toolTip:hover {
            text-decoration: none;
        }

        .toolTip:hover:after {
            content: attr(data-tooltip);
            text-decoration:none;
            position: absolute;
            background: #40ABF0;
            padding: 3px 7px;
            margin-left: 7px;
            margin-top: -3px;
            color: #FFF;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }
</style>




...



<a href='urlOfSite' target='_blank' class='toolTip' data-tooltip='Text to show in the custom tooltip!'>