So erstellen und positionieren Sie einen Tooltip in Bootstrap 5
Tooltip ist ein kleines Popup -Box, das angezeigt wird, wenn ein Benutzer den Cursor über eine Schaltfläche oder einen Link verschiebt. Tooltips sind für die neuen Benutzer einer Website nützlich, um sie vor Verwirrung oder einem Problem zu speichern, während Sie Ihre Website erkunden.
Dieser Artikel wird Sie überbringen
- Erstellen von Tooltips in Bootstrap 5
- Positionieren Sie Tooltips
So erstellen Sie Tooltip
So erstellen Sie eine Tooltip -Verwendung, Datenattribut “Data-BS-Toggle = ”Tooltip" in deinem Tag oder Tag und der Text, der in Tooltip angezeigt wird, muss mit dem Titelattribut geschrieben werden.
Tooltip mit Link
Cursor hier platzieren
Tooltip mit Taste
$ (Dokument).Ready (function ()
$ ('[data-bs-toggle = "tooltip"]')).Tooltip ();
);
Lassen Sie mich nun sagen, dass wir in Bootstrap 5, um einen Tooltip zu erstellen Tag oder Tag und schreiben Sie auch eine jQuery, um es zu aktivieren. Deshalb unterteilt ich den Erstellungsprozess in Schritte, die Ihnen ein besseres Verständnis verleihen können.
Schritte
Das Erstellen eines Tooltip in Bootstrap 5 ist ein einfacher zweistufiger Prozess
Schritt 1: Hinzufügen Data-BS-Toggle = "Tooltip" und title = "Tooltip-Text geht hier" Attribute in Ihrem oder Tag.
Tooltip mit Link
Cursor hier platzieren
Tooltip mit Taste
Schritt 2: Aktivieren Sie Tooltips, indem Sie JQuery folgende Code schreiben
Positionierung von Tooltips
So positionieren Sie einen Tooltip als Ihre Anforderung Fügen Sie Data-BS-Placement = "Oben/rechts/links/unten hinzu zu deinem oder Tag Tooltip -Position ändern.
Abschluss
Tooltips werden durch Hinzufügen erstellt Data-BS-Toggle = "Tooltip" und title = "Tooltip-Text geht hier" Attribute in oder Tag und aktivieren Sie es, indem Sie einen JavaScript -Code schreiben. Für die Positionierung gerecht Fügen Sie data-bs-placement = "ober/boden/rechts/links hinzu." Attribut zu oder Tag hinzufügen.