Bootstrap - Tooltips: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir ein in die wunderbare Welt der Bootstrap-Tooltips. Als dein freundlicher Nachbar-Computerlehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Mach dir keine Sorgen, wenn du noch nie eine Zeile Code geschrieben hast – wir beginnen ganz am Anfang und arbeiten uns hoch. Also, hol dir eine Tasse Kaffee (oder dein Lieblingsgetränk) und los geht's!

Was sind Tooltips?

Bevor wir uns den Details zuwenden, lassen wir uns darüber klar werden, was Tooltips sind. Hast du jemals mit der Maus über ein Symbol oder Text auf einer Webseite geflogen und eine kleine Pop-up-Nachricht mit zusätzlichen Informationen gesehen? Das ist ein Tooltip! Sie sind wie kleine Helfer, die zusätzliche Kontextinformationen oder Erklärungen bieten, ohne deinen Hauptinhalt zu verwirren.

Tooltips aktivieren

Nun, lassen wir uns ein bisschen mit Code beschäftigen. Das Erste, was wir tun müssen, ist, Tooltips in Bootstrap zu aktivieren. Mach dir keine Sorgen; es ist einfacher, als es aussieht!

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Dieser kleine Script tells Bootstrap: "Hey, wir möchten auf dieser Seite Tooltips verwenden!" Es ist so, als ob man den Lichtschalter ankleuchtet, bevor man in einem dunklen Raum sehen kann.

Erstellung eines Tooltips

Lassen wir uns unseren ersten Tooltip erstellen. Es ist so einfach wie das Hinzufügen einiger Attribute zu einem HTML-Element:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Ich bin ein Tooltip!">
Fahre mit der Maus über mich
</button>

Hier passiert folgendes:

• Wir erstellen eine Schaltfläche mit Bootstrap's btn und btn-secondary Klassen.
• data-toggle="tooltip" sagt Bootstrap, dass dieses Element einen Tooltip haben soll.
• title="Ich bin ein Tooltip!" ist der Text, der in unserem Tooltip angezeigt wird.

Wenn du über diese Schaltfläche fährst, siehst du "Ich bin ein Tooltip!" appear. Magie, nicht?

Tooltips auf Links

Tooltips sind nicht nur für Schaltflächen. Lassen wir uns einen zu einem Link hinzufügen:

<a href="#" data-toggle="tooltip" title="Klicke mich, umwohin zu gehen!">Fahre mit der Maus über diesen Link</a>

Dies funktioniert genauso wie unser Beispiel mit der Schaltfläche. Wenn du mit der Maus über den Link fährst, siehst du die Tooltip-Nachricht.

Individuelle Tooltips

Nun, werden wir ein bisschen stylisher. Wir können unsere Tooltips anpassen, um sie interessanter zu gestalten:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>Tooltip</em> <u>mit</u> <b>HTML</b>">
Fahre für HTML Tooltip
</button>

In diesem Beispiel haben wir data-html="true" hinzugefügt, um HTML in unserem Tooltip zu erlauben. Jetzt können wir Tags wie <em>, <u>, und <b> verwenden, um unseren Tooltip-Text zu gestalten.

Positionierung eines Tooltips

Wir können steuern, wo unser Tooltip im Verhältnis zu unserem Element erscheint. Lassen wir uns alle vier Positionen ausprobieren:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Oberer Tooltip">
Tooltip oben
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Rechter Tooltip">
Tooltip rechts
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Unterer Tooltip">
Tooltip unten
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Linker Tooltip">
Tooltip links
</button>

Das data-placement-Attribut sagt Bootstrap, wo der Tooltip positioniert werden soll. Es ist, als ob man seinem Freund sagt, wo er für ein Foto stehen soll!

Tooltip mit individuellem HTML

Erinnere dich daran, wie wir earlier HTML in unserem Tooltip ermöglicht haben? Lassen wir uns das eine Stufe weiterführen:

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>Individuelle Überschrift</h3><p>Dies ist ein Absatz.</p><img src='smiley.gif' alt='Lachgesicht'>">
Fahre für eine Überraschung!
</button>

Dieser Tooltip enthält eine Überschrift, einen Absatz und sogar ein Bild! Es ist wie eine kleine Webseite innerhalb deines Tooltips.

Markup

Manchmal möchtest du mehr Kontrolle über die Struktur deines Tooltips. Dann kommt individuelles Markup ins Spiel:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="Individueller Tooltip">
Individuelles Tooltip-Markup
</button>

Dieses Beispiel verwendet das data-template-Attribut, um eine individuelle Struktur für unseren Tooltip zu definieren. Es ist, als ob man ein Haus selbst baut, anstatt eins vorgefertigt zu kaufen!

Tooltip auf deaktivierten Elementen

Normalerweise lösen deaktivierte Elemente keine Benutzereingaben aus. Aber mit einem kleinen Trick können wir Tooltips darauf funktionieren lassen:

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Deaktiver Tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Deaktivierte Schaltfläche</button>
</span>

Wir wrappen unsere deaktivierte Schaltfläche in ein span, das den Fokus erhalten kann. Es ist, als ob man einem Helfer gibt, der nicht bis zur oberen Ablage reicht!

Optionen

Schließlich schauen wir uns einige Optionen an, die wir verwenden können, um unsere Tooltips weiter anzupassen:

Option	Typ	Standard	Beschreibung
animation	boolean	true	eine CSS-Verdunkelungstransition auf den Tooltip anwenden
container	string | false	false	fügt den Tooltip an ein spezifisches Element an
delay	number | object	0	Verzögerung beim Anzeigen und Ausblenden des Tooltips (ms)
html	boolean	false	HTML im Tooltip erlauben
placement	string | function	'top'	wie der Tooltip positioniert werden soll
selector	string	false	wenn ein Selektor angegeben ist, werden Tooltip-Objekte an die angegebenen Ziele delegiert
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	Basis-HTML, das beim Erstellen des Tooltips verwendet wird
title	string | element | function	''	Standard-Titelwert, wenn das title-Attribut nicht vorhanden ist
trigger	string	'hover focus'	wie der Tooltip ausgelöst wird - klick | hover | focus | manuell

Du kannst diese Optionen verwenden, wenn du deine Tooltips initialisierst:

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

Dieses Code deaktiviert die Verdunkelungstransition, fügt eine Verzögerung hinzu und plaziert den Tooltip auf der rechten Seite des Elements.

Und das war's! Du hast gerade deine ersten Schritte in die Welt der Bootstrap-Tooltips gemacht. Denke daran, der Schlüssel zum Beherrschen davon (und jedem anderen Coding-Konzept) ist die Übung. Versuche, eine Webseite zu erstellen und verschiedene Arten von Tooltips hinzuzufügen. Experimentiere mit den Optionen und sieh, was du erschaffen kannst.

Bevor du es weißt, wirst du der Meister der Tooltips sein, und deine Webseiten werden informativ und interaktiv sein! Frohes Coden und vergiss nicht, Spaß dabei zu haben!

Credits: Image by storyset