Simple accesible tooltip class - An anchor with a span inside, behaves well with tab navigation and screen readers. A CodePen by Agustín Amenabar.

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-minimum">?<span>Sure, just hover or tab to this anchor tag and you'll see a tooltip apear.</span></a> 
Might this require more explanation.
<a href="javascript:;" class="tooltip">?<span>Sure, just hover or tab to this anchor tag and you'll see a tooltip apear.</span></a>
</p>

style.scss

@import "compass";
.tooltip-minimum{ 
	position: relative;
	overflow: hidden;
  @include inline-block;//it could be display:block;
	span{
//NOTE: this block must positiones outside the parent's box to be hidden.
		display:block;
		position: absolute;
		left: 0;
		top: 2em;
		z-index: 99;
		width: 15em;
	}
	&:hover, &:active, &:focus{
		overflow: visible;
	}
}

.tooltip{ 
	/* this is for actual behaviour */
	position: relative;
	overflow: hidden;
  @include inline-block;//it could be display:block;
  /* this is for mere presentation */
  outline:none;//since it's obvious there's focus.
	padding:0.125em 0.25em;
	color:#FFF;
	text-decoration: none;
	border-radius: 3px;
	cursor:help;
  background:#444;
	span{
		/* this is for actual behaviour */
//NOTE: this block must positiones outside the parent's box to be hidden.
		display:block;
		position: absolute;
		left: 0;
		top: 2em;
		z-index: 99;
		width: 15em;
		/* this is for mere presentation */
		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;
	}
	&:hover, &:active, &:focus{
		/* this is for actual behaviour */
		overflow: visible;
		/* this is for mere presentation */
		background:#000;
		span{
			opacity:1;
		}
	}
}