CSS Tipp: Klickbare Tooltips nur mit CSS3

Die kleinen Info-Boxen versorgen uns, nach dem wir mit der Maus drüber gefahren sind, mit noch mehr Informationen. Wie sich das nun mit CSS auch mit klicken realisieren lässt möchte ich in diesem Artikel zeigen.

Es ist bereits bekannt dass man mit Hilfe des CSS3-Selektors :checked unterscheiden kann ob ein Element angeklickt ist oder nicht. So kann ein Text-Element zwei verschiedene Zustände einnehmen zum Beispiel kursiv und nicht kursiv. Diese Eigenschaft können wir uns auch hier zu Nutze machen.

Demo oder Download

 

Ein Tooltip

Bevor wir ein Tooltip mit einem Klick sichtbar machen können, benötigen wir erstmal eines. Hier für benutzen wir ein einfaches HTML-Gerüst.

HTML

<div class=“tooltips“>
    Beispieltext
    <span>Beschreibung mit <a href=“#“ target=“_blank“>Link</a>!</span>
</div>Code-Sprache: HTML, XML (xml)

Da ich zusätzlich ermöglichen möchte das Texte formatiert und Links in den Tooltips eingefügt werden können, arbeite ich mit einem span Element. Oft wird der Inhalt einer Tooltip-Box aus dem title Text gelesen.

CSS

Kommen wir nun zum CSS unserer Tooltip-Box. Damit sich ein Info-Text vom restlichen Text abhebt, habe ich es gepunktet unterstrichen.

.tooltips {
    position: relative;
    display: inline;
    cursor: help;
    border-bottom:1px dotted;
}
.tooltips span {
    position: absolute;
    width:140px;
    color: #FFFFFF;
    font-size:0.8em;
    background: #000000;
    text-align: center;
    visibility: hidden;
    padding:5px 8px;
    border-radius: 6px;
}
.tooltips span:after {
    content: “;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0; height: 0;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}Code-Sprache: CSS (css)

Den letzten Teil habe ich bewusst weg gelassen, da er nur dafür sorgt dass die Box bei einem :hover-Event angezeigt wird.

Klick-Events mit CSS

Kommen wir nun zum knackpunkt oder ehr »klickpunkt« unseres Artikels. Lange Zeit war es nur mit Java-Script möglich ein Klick-Event auszulösen und darauf eine Aktion auszuführen. Seit CSS3 ist es möglich mit dem Checkbox-Hack zwischen einen angeklickten und nicht angeklickten Zustand zu unterscheiden. Wie praktisch!

Wie das ganze funktioniert

Der Trick funktioniert ganz einfach: Wir haben eine Checkbox mit zwei Zuständen. Die Zustände lassen sich nicht nur direkt sondern auch über ein Text-Label verändern.

Wir fügen also eine Checkbox und Label zu unserem HTML-Gerüst dazu. Somit sieht unser HTML nun so aus:

<i class=“tooltips“>
    <input type=“checkbox“ id=“clickevent_1″>
    <label for=“clickevent_1″>
        Beispieltext
    </label>
    <span>
        Beschreibung mit <a href=“#“ target=“_blank“>Link</a>!
    </span>
</i>Code-Sprache: HTML, XML (xml)

Wichtig: Es müssen immer verschiedene id’s gewählt werden.

CSS ergänzen

Es fehlen noch zwei Sachen die wir zum vorherigen CSS hinzufügen müssen. Als erstes sorgen wir dafür das unsere Checkbox nicht sichtbar ist. Im zweiten Teil fangen wir dann den Zustand checked ab und sorgen mit Hilfe des Nachbar-Selektors ~ dafür dass auf der selben Ebene das span Element sichtbar gemacht wird.

.tooltips input {
    display:none;
}

.tooltips input:checked ~ span {
    visibility: visible;
    opacity: 0.8;
    bottom: 25px;
    width:150px;
    left: 50%;
    margin-left: -82px;
    z-index: 999;
}Code-Sprache: CSS (css)

:focus als Alternative

Mit Hilfe des focus können wir dafür sorgen das die Tooltip-Box wieder verschwindet, sobald man außerhalb des Text-Labels geklickt hat. Dafür müssen wir in unserem CSS nur das :checked in ein :focus ändern – schon funktioniert es.

Nachteil dieser Methode ist, dass die Links darin nicht mehr anklickbar sind.