Thorsten H. Willert

Bootstrap-Bedienelemente ohne JavaScript: Tooltips

Details
 
images/Allgemein/Bootstrap_Title.svg

Bootstrap-Tooltips aus reinem HTMl und CSS

Bootstrap-Tooltips ohne das zusätzliche Bootstrap JavaScript-Paket

Die Beispiele sind für Bootstrap 5.3 optimiert. Damit ist auch ein Dark-Mode möglich.

Die technischen Beschreibungen folgen noch.

Tooltips

  • Lassen sich an vier Seiten positionieren.
  • Auf schmalen Bildschirmen werden die Zeilen umgebrochen.
  • Farben der Schrift und des Hintergrunds lassen sich per style anpassen.
  • Automatische Anpassung an Bootstrap-Light / Dark-Mode

Zusammenfassung


Mit ein wenig CSS lassen sich Tooltips komplett ohne JavaScript erzeugen.
Damit sparen Sie sich, für diese Fälle, die zusätzliche Übertragung der Datei bootstrap.bundle.min.js ( 80.42 kB).

Das spart Energie, Übertragungsvolumen, Speicherplatz und Ihre Seite wird schneller geladen.

Mehr zum Thema

Weitere Elemente

Software

Weiterführende Informationen

Downloads

css.png Bootstrap-Bedienelemente ohne JavaScript       
Beispiele und CSS-Dateien.
Für jedes Element ist eine einzelne CSS-Datei vorhanden.
  • Card-Collapse
  • Tabs
  • Tooltips
  • Carousel (Beta)
 		   Download
 04.02.2023  11.82 KB  MIT link_extern.gif     20

Titel-Bild von Thorsten Willert, basierend auf der Startseite von Bootstrap. Bootstrap-Icon aus simple-icons.
Zugriffe: 49