Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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

CSS-Beispiel für tastaturbedienbare Tooltips

Hinweise

Links

HTML

      <nav role="navigation" aria-label="Beispiel" class="tooltip">
        <ul id="demo">
          <li id="demo-vor">
            <a href="linktext.html" data-title="Tooltip im Fließtext: Text eines Tooltips als Teil des Linktextes ausspielen">
              <img alt="" src="blaettern-vor.png">
              weiter
            </a>
          </li>
          <li id="demo-zurueck">
            <a href="title-attribut.html" data-title="Das <code>title</code>-Attribut: Standardmäßige Darstellung eines Tooltips mit HTML">
              <img alt="" src="blaettern-zurueck.png">
              zurück
            </a>
          </li>
        </ul>
      </nav>

JavaScript (jQuery)

      /* Kein JavaScript */

CSS

.tooltip A[data-title] {
  position:relative;
}
.tooltip a[data-title]:after {
  position:absolute;
  top: 3.1em;
  background-color: #fff;
  border: 2px solid #c0c0c0;
  padding: 0.2em;
  line-height: 1.2em;
  content: attr(data-title);
  display: none;
  width: 17.7em;
  color: #484848;
  }
#demo-vor a[data-title]:after {
  left:-0.3em;
  z-index:100;
}
#demo-zurueck a[data-title]:after {
  left:.9em;
  z-index:100;
}

.tooltip a[data-title]:focus:after,
.tooltip a[data-title]:hover:after {
  display: block;
}
#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;
}


/* 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;
}