Schritt für Schritt zu barrierefreien Tooltips veröffentlicht in 2015

      <nav role="navigation" aria-label="Beispiel" class="tooltip">
        <ul id="demo">
          <li id="demo-vor">
            <a href="tooltip-mit-css.html" title="Per Tastatur zugängliche Tooltips: CSS für die gleichwertige Darstellung von Tooltips bei Fokus und Mausberührung">
              <img alt="" src="blaettern-vor.png">
              weiter
            </a>
          </li>
          <li id="demo-zurueck"></li>
        </ul>
      </nav>

      /* Kein JavaScript */

#demo-vor a::before {
  content: url('tooltip-nach-unten-rechts.png');
  position:absolute;
  left:4em;
}

/* Für die Blätternavigation */
#demo {
  clear: both;
  margin: 0 0 1em 0 !important; /* Konflikt mit all. CSS */
  padding: 0;
  font-size: 1em;
  font-family: verdana, arial, helvetica, sans-serif;
  display: block;
  min-height:2.8em;
}
#demo li {
  padding:0;
  float: right;
  position:relative;
  list-style-type: none !important; /* Konflikt mit allg. CSS */
  width:20em;
  min-height:2.8em;
  margin:0 0.35em;
}
#demo a {
  border-color: #6fbed6;
  border-style:solid;
  text-decoration: underline;
  color: #484848;
  max-width: 400px;
  width: 17.7em;
  display: block;
  line-height: 1.125em;
  min-height: 2em;
}
#demo-vor a{
  border-width: 1px 0 1px 3px;
  padding: 0.85em 1em 0.2em 0.4em;
}
#demo-zurueck a{
  border-width: 1px 3px 1px 0;
  padding: 0.85em 0.4em 0.2em 1em;
  text-align: right;
}
#demo-vor a::before {
  content: url('tooltip-nach-unten-rechts.png');
  position:absolute;
  left:4em;
}
#demo-zurueck a::before {
  content: url('tooltip-nach-unten-links.png');
  position:absolute;
  right:4em;
}
#demo img {
  position:absolute;
  top:0.6em;
  border: 0;
}
#demo-vor img{
  right: 0px;
}
#demo-zurueck img{
  left: 0px;
}
#demo span[role=tooltip] {
  top:3.2em;
  left:0;
  width:auto;
  max-width: 17.7em;
  background-color: #FFF;
  color: #484848;
  border: 2px solid #c0c0c0;
  line-height: 1.2em;
  padding: 0.2em;
}
#demo-zurueck span[role=tooltip] {
  left:1em;
}