Tooltips eignen sich gut, um erklärende Infos und weiterführende Texte anzuzeigen. Das geschieht z. B. beim Überfahren eines Elements (hover) oder durch einen Klick auf das Element (click).
Der Tooltip wird dann in unmittelbarer Nähe des auslösenden Elements eingeblendet.
Tooltips kannst du auf zwei verschiedene Arten in dein Projekt einbinden.
- Tooltips aktivieren
- Tooltips mit data-Attributen
- Tooltips mit Javascript
- Besonderheiten
Tooltips aktivieren
Egal ob du Tooltips mit data-Attributen oder JavaScript nutzen möchtest. Zuallererst muss die Tooltip-Funktion aktiviert werden. Das passiert mit einer kleiner JavaScript-Anweisung.
$('[data-toggle="tooltip"]').tooltip();
});
Danach kannst du mittels data-toggle="tooltip" einen Tooltip anzeigen lassen.
Beispiel Tooltips mit data-Attributen
Tooltips mit data-Attributen
Egal ob du Tooltips mit data-Attributen oder JavaScript nutzen möchtest. Zuallererst muss die Tooltip-Funktion aktiviert werden. Das passiert mit einer kleiner JavaScript-Anweisung.
$('[data-toggle="tooltip"]').tooltip();
});
Danach kannst du mittels data-toggle="tooltip" einen Tooltip anzeigen lassen.
Beispiel Tooltips mit data-Attributen