A CodePen by Agustín Amenabar. Simple accesible tooltip class - For an anchor with a span inside, behaves well with tabbed navigation.

index.html

<h1>Hellô Töòltip</h1>
<p>Here we have some unimportant information. <a href="#">Our company</a> provides solutions to the needs and requirements of our clients.</p>
<p><a href="javascript:;" class="tooltip">?<span>Sure, just hover or tab to this anchor tag and you'll see a tooltip apear.</span></a> This might require more explanation.</p>

style.scss

@import "compass";
.tooltip{ 
	@include inline-block;
	padding:0.125em 0.25em;
	color:#FFF;
	text-decoration: none;
	position: relative;
	cursor:help;
  outline:none;//since it's obvious there's focus.
	border-radius: 3px;
	span{
		visibility:hidden;
    display:block;
    position: absolute;
		left: 0;
  	top: 2em;
  	z-index: 99;
  	width: 15em;
		color: #444;
		background:#FFF;
		border-radius: 4px;
		border: 1px solid #888;
		padding:0.5em 1em;
		@include single-box-shadow(rgba(0,0,0,0.4), 2px, 2px, 4px, 0);
    @include single-transition(opacity, 0.5s, ease-in-out);
    opacity:0;
	}
	&:link, &:visited{
		background:#444;
	}
	&:hover, &:active, &:focus{
		background:#000;
		span{
			visibility:visible;
      opacity:1;
		}
	}
}