Webdesign - Die individuelle Tool-Tipp-Anzeige auf einer Website

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie erstelle ich eine individuelle Tool-Tipp-Anzeige für zusätzliche Informationen?

08Feb2014

Die individuelle Tool-Tipp-Anzeige auf einer Website


Damit der Besucher zusätzliche Informationen zum Beispiel bei Abkürzungen oder Fremdwörter erhält ist ein Tool-Tipp sehr nützlich. So ein Tool-Tipp wird beim Überfahren eines Wortes mit dem Mauszeiger durch ein kleines Pop-up-Fenster angezeigt.
Die Tool-Tipps die auf dieser Website eingesetzt werden, sind ausschließlich mit CSS3 (Cascading Style Sheet)-Mitteln erstellt worden. Sie können diese zusätzliche Information direkt hier bei dem Akronym CSS3 (Cascading Style Sheet) testen.

Mit den in HTML5 (HyperText Markup Language) eingeführten Data-Attributen lassen sich individuelle Informationen auf beliebige Elemente anwenden. Diese Attribute können dann über CSS3 (Cascading Style Sheet) ausgelesen und somit die Inhalte für die Tool-Tipps angezeigt werden.

Wie wird nun so ein benutzerdefiniertes Attribut erstellt?
Diese Attribute beginnen alle mit "data- (Daher kommt auch der Name Data-Dashs (Gedankenstrich))", gefolgt von einer individuellen Bezeichnung.

In HTML (HyperText Markup Language) wird die zusätzliche Information für ein Wort wie folgt geschrieben:

<span class="tooltip" data-tooltip="HyperText Markup Language">
  HTML
</span>

Nun beginnt die eigentliche Arbeit, denn dieser Tool-Tipp wird mit CSS3 (Cascading Style Sheet) gestaltet. Als erstes erhält der Tool-Tipp die "position: relative" damit er vernünftig positioniert werden kann.

[data-tooltip] {
    position: relative;
    display: inline-block;
}

Im nächsten Schritt wird über das Pseudoelement ":before" zuerst der Pfeil, der nach oben auf das zu erklärende Wort zeigt, gestaltet. Damit das Pseudoelement überhaupt angezeigt werden kann, muss der "content: ''" angegeben werden, auch wenn er in diesem Fall leer bleibt. Für den Pfeil gehe ich genauso vor, wie ich das bei meinem Logo beschrieben haben. Und damit der Pfeil erst erscheint wenn der Mauszeiger über das Wort fährt, wird das Element auf unsichtbar geschaltet "visibility: hidden" und über "opacity" von "0" auf "1" langsam eingeblendet. Mit der Angabe "margin-top: -8px" wird der Pfeil zuerst über das Wort eingeblendet und wandert dann innerhalb von 0,3 Sekunden unter das Wort "margin-top: 5px".

[data-tooltip]:before {
    content: '';
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: 0;
    margin-top: -8px;
    border: 8px solid transparent;
    border-bottom: 10px solid #568bbc;
    border-top: none;
    z-index: 1001;
    transition: .3s;
}

[data-tooltip]:hover:before,
[data-tooltip]:focus:before {
    visibility: visible;
    opacity: 1;
    margin-top: 5px;
}

.tooltip:before {
    top: 100%;
    left: 45%;
}

span.tooltip {
    cursor: help;
    border-bottom: 1px dotted #000;
    line-height: 1.1em;
}

Für die Gestaltung der Tool-Tipp-Hintergrundfläche benutze ich das Pseudoelement ":after". Hierbei lege ich auch einen Schatten um den Tool-Tipp damit er sich noch besser vom eigentlichen Text abhebt.

[data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    visibility: hidden;
    opacity: 0;
    margin-top: -1px;
    padding: 8px 10px;
    background: linear-gradient(#568bbc,#39648c);
    border-radius: 5px;
    text-shadow: 0 -1px 0 #000;
    font: .75em/1.4 Arial;
    white-space: nowrap;
    color: #fff;
    box-shadow: 10px 10px 12px #111;
    z-index: 1001;
    transition: .3s;
}

[data-tooltip]:hover:after,
[data-tooltip]:focus:after {
    visibility: visible;
    opacity: 1;
    margin-top: 5px;
}

.tooltip:after {
    top: 100%;
    left: 45%;
    margin-left: -50%;
}

24Sep2015

Anweisung [data-tooltip] ist nicht valide


Da die vorgestellte Umsetzung leider nicht valide ist, habe ich mich zu einer neueren Umsetzung mit einfachen "span-Elementen" entschieden.

In HTML (HyperText Markup Language) wird die zusätzliche Information für ein Wort nun mit einem zusätzlichen "span-Element" wie folgt geschrieben:

<span class="tooltip">
  HTML
  <span class="tip">
     (HyperText Markup Language)
  </span>
</span>

Der Tool-Tipp wird wie bei der vorherigen Umsetzung mit CSS3 (Cascading Style Sheet) gestaltet und erhält die "position: relative" und eine gestrichelte Linie damit er entsprechend dargestellt wird.

.tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted #000;
}

Im nächsten Schritt wird wieder über das Pseudoelement ":before" der Pfeil, der dieses Mal nach unten auf das zu erklärende Wort zeigt, gestaltet. Und damit der Pfeil erst erscheint wenn der Mauszeiger über das Wort fährt, wird das Element auf unsichtbar geschaltet und über "opacity" von "0" auf "1" langsam eingeblendet. Mit der Angabe "margin-bottom: 5px" wird der Pfeil zuerst über das Wort eingeblendet und wandert dann innerhalb von 0,3 Sekunden über das Wort "margin-bottom: 15px".

.tip {
    position: absolute;
    bottom: 100%;
    margin-bottom: 5px;
    left: -25px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.tip:before {
    position: absolute;
    content: '';
    border: 8px solid transparent;
    border-top: 10px solid #39648c;
    border-bottom: none;
    bottom: -10px;
    left: 50px;
}

.tooltip:hover .tip {
    opacity: 1;
    visibility: visible;
    margin-bottom: 15px;
}

Hier sieht man den Pfeil in Aktion: Test für den Pfeil

Für die Gestaltung der Tool-Tipp-Hintergrundfläche wird das "span-Element" mit dem Namen "tip" gestaltet. Hierbei lege ich einen Schatten um den Tool-Tipp damit er sich noch besser vom eigentlichen Text abhebt.

.tip {
    position: absolute;
    background: linear-gradient(#568bbc,#39648c);
    border-radius: 5px;
    border: 2px solid #161a1f;
    text-shadow: 0 -1px 0 #000;
    font: .75em/1.4 Arial;
    text-align: center;
    width: 10em;
    color: #fff;
    box-shadow: 10px 10px 12px #111;
    bottom: 100%;
    margin-bottom: 5px;
    left: -25px;
    opacity: 0;
    visibility: hidden;
    padding: 8px 10px;
    transition: .3s;
}

Die Angabe "visibility: hidden" setzt den Tool-Tipp auf unsichtbar. Erst wenn der Mauszeiger sich über dem Wort befindet, wird der Tool-Tipp mit "visibility: visible" auf sichtbar geschaltet. Andernfalls würde der Tool-Tipp auch angezeigt wenn sich der Mauszeiger über der Einblendung der Erklärung befindet!

Anstelle von "visibility: hidden" wäre zur Ausblendung des Tool-Tipps auch die Angabe "pointer-events: none" eine Möglichkeit, aber diese ist nicht valide. Die Eigenschaft "pointer-events" ermöglicht es nämlich, Elemente gezielt von Aktionen durch die Maus auszuschließen.
Und die dritte Möglichkeit den Tool-Tipp auf unsichtbar zu stellen wäre "display: none" und mit "display: block" könnte man diesen wieder sichtbar stellen. Aber hierbei wird der Tool-Tipp direkt eingeblendet und läßt sich nicht langsam nach oben verschieben. Also habe ich mich für die erste Variante entschieden

Das war's! Der Tool-Tipp (Der Tool-Tipp ist fertig gestaltet!) zum Testen!

Tipp: Die Tool-Tipp-Texte kann man mit dem Befehl "white-space: nowrap" immer in einer Zeile anzeigen, aber für längere Texte empfiehlt es sich das Element zu entfernen und mit einer definierten Breite "width: 10em" oder Höhe zu arbeiten.

Sie möchten zurück zur Seite "Codeschnipsel" (Es funktioniert auch mit einem Verweis zu einer anderen Seite)?

Zum Seitenanfang springen Λ