Tooltips in Bootstrap - Eine Anleitung

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.

Tooltip in Bootstrap

Tooltips kannst du auf zwei verschiedene Arten in dein Projekt einbinden.

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.

$(function () {
    $('[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.

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

 Danach kannst du mittels data-toggle="tooltip" einen Tooltip anzeigen lassen.

Beispiel Tooltips mit data-Attributen

 

 

Hast du eine Frage zu dieser Seite?
Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK