Tooltip - dies ist ein Tooltip, der dem Benutzer zusätzliche Informationen über ein Schnittstellenelement zur Verfügung stellt. Bootstrap 5 bietet eine einfache und elegante Möglichkeit, den Elementen auf einer Webseite ein Tooltip hinzuzufügen.
In diesem Tutorial erfahren Sie, wie Sie tooltip hinzufügen Bootstrap 5 mit der integrierten Tooltip-Komponente und mit JavaScript. Außerdem zeigen wir einige Beispiele und konfigurieren verschiedene Tooltip-Optionen, um ein einzigartiges visuelles Aussehen und Verhalten zu erzeugen.
Hinzufügen von tooltip zu Bootstrap 5 ganz einfach. Wir können das Attribut verwenden data-bs-toggle="tooltip" für das Element, dem Sie eine Eingabeaufforderung hinzufügen möchten. Verwenden Sie dann das Attribut title. wir geben den Text an, der in der Quickinfo angezeigt wird.
Was ist tooltip in Bootstrap 5
Ein Tooltip kann Text, ein Bild oder andere Inhalte enthalten. Es ist nützlich, wenn Sie dem Benutzer eine zusätzliche Erklärung über die Funktionalität oder Beschreibung eines Elements geben möchten, ohne die Hauptschnittstelle zu überladen.
In Bootstrap 5 wird tooltip mit JavaScript und CSS implementiert. Das Element, dem ein tooltip hinzugefügt werden soll, muss über ein Attribut verfügen data-bs-toggle="tooltip" gibt an, dass ein Tooltip verwendet werden muss. Attribut title gibt den Quickinfo-Text an, der angezeigt wird, wenn Sie über ein Element schweben.
Bootstrap 5 bietet die Möglichkeit, das Aussehen von Tooltip mit verschiedenen Klassen und Optionen wie Position, Breite, Animation usw. anzupassen. d.
Das Hinzufügen von Tooltip zu Bootstrap 5 verbessert die Benutzerfreundlichkeit der interaktiven Elemente einer Webseite und macht die Benutzererfahrung informativer und verständlicher.
Warum tooltip in Bootstrap 5 verwenden
Tooltip kann verwendet werden, um:
- Erläuterung der Funktionalität der Schnittstellenelemente mithilfe von Popup-Text.
- Zeigt zusätzliche Details an, wenn Sie auf bestimmte Elemente zeigen.
- Bezeichnungen bestimmter Bedingungen oder Fehler mithilfe von Textmarkierungen.
Mit tooltip in Bootstrap 5 können Sie die Benutzererfahrung verbessern und die Webseite für die Benutzer informativer und verständlicher machen.
Wie füge ich tooltip zu Bootstrap 5 hinzu
Bootstrap 5 bietet eine einfache und effektive Möglichkeit, Tooltips zu Elementen Ihrer Website oder Anwendung hinzuzufügen.
Um ein tooltip zu bootstrap 5 hinzuzufügen, müssen Sie das Attribut data-bs-toggle="tooltip" auf dem Zielelement verwenden und dann den Tooltip-Text mit dem title- Attribut festlegen.
Sie können das Verhalten von tooltip auch mit zusätzlichen Bootstrap 5-Attributen und -Klassen anpassen, z. B. die Position von tooltip mit dem data-bs-placement-Attribut angeben.
Beispielcode für die Positionseinstellung von tooltip:
Darüber hinaus können Sie auch JavaScript verwenden, um das Tooltip zu konfigurieren, z. B. um die Anzeigeverzögerung mit der data-delay-Methode zu ändern.
Beispielcode mit der Einstellung für die Anzeigeverzögerung von tooltip:
Jetzt können Sie einfach tooltip zu Ihrer Website oder Anwendung mit Bootstrap 5 hinzufügen!
Beispiele für die Verwendung von tooltip in Bootstrap 5
Hier sind einige Beispiele für die Verwendung von tooltip in Bootstrap 5:
Beispiel 1:
Tooltip, wenn Sie über die Schaltfläche schweben:
Bewegen Sie den Mauszeiger, um die Eingabeaufforderung anzuzeigen
Beispiel 2:
Tooltip, wenn Sie über ein Bild schweben:
Beispiel 3:
Quickinfo mit langem Text:
Text mit Quickinfo
Beispiel 4:
Quickinfo mit HTML-Inhalt:
Bewegen Sie den Mauszeiger, um die Eingabeaufforderung anzuzeigen
Beispiel 5:
Quickinfo, wenn Sie auf den Linktext zeigen:
Tooltip mit Text
In Bootstrap 5 müssen Sie das data-bs-tooltip-Attribut zusammen mit der Tooltip-Klasse und dem entsprechenden Selektor verwenden, um ein Tooltip mit Text hinzuzufügen.
Beachten Sie, dass der Link eine Tooltip-Klasse und ein data-bs-tooltip-Attribut mit dem Text hat, der beim Schweben des Mauszeigers im Tooltip angezeigt wird.
Tooltip mit Bild
In Bootstrap 5 können Sie einfach ein tooltip mit einem Bild hinzufügen, indem Sie das Attribut data-bs-tooltip und die Stile aus der Bibliothek verwenden.
Fügen Sie zunächst einen Link oder eine Schaltfläche hinzu, über die der Benutzer schweben kann, um tooltip anzuzeigen:
Dann erstellen wir einen Tooltip-Block, der das Bild enthält:
Это tooltip с изображениемBeachten Sie die Klassen tooltip , tooltip-image und tooltip-text, die im Bildblock angegeben sind. Sie ermöglichen es Ihnen, die Stile eines Tooltip-Blocks und seines Inhalts anzupassen.
Wenn Sie den Mauszeiger über einen Link oder eine Schaltfläche bewegen, wird der Benutzer schließlich ein Tooltip mit dem Bild und dem Text sehen, der im Tooltip-Text-Block angegeben ist.
Tooltip mit Link
Mit Bootstrap können Sie ein Tooltip mit einem Link zu Elementen auf einer Seite hinzufügen. Dazu muss ein Attribut verwendet werden data-bs-toggle="tooltip" und Attribut title mit Texthinweis. Sie können auch ein Attribut angeben data-bs-placement um die Position des tooltip zu bestimmen.
In diesem Beispiel wird ein Tooltip mit dem Text "Hier klicken" angezeigt, wenn Sie den Mauszeiger über den Link bewegen.
Tooltip auf verschiedenen Elementen
Tooltip kann auf verschiedene Elemente einer Webseite angewendet werden. Im Folgenden finden Sie Beispiele für die Verwendung von tooltip mit verschiedenen Elementen:
| Element | Ein Beispiel |
|---|---|
| Der Link | Bewegen Sie den Mauszeiger, um das tooltip anzuzeigen |
| Knopf | Bewegen Sie den Mauszeiger, um das tooltip anzuzeigen |
| Darstellung | |
| Eingabefeld |
Tooltip kann auf jedes Element angewendet werden, das die Attribute data-bs-toggle und title unterstützt. Fügen Sie diese Attribute einfach dem Element hinzu und geben Sie den Text für das tooltip im title-Attribut an.
