Tutorial: Bootstrap – Thumbnail Hover Caption mit Tooltip


Update Tutorial: Bootstrap 3 Thumbnail Caption Animation mit animate.css Im Gegensatz zu diesem Artikel, basiert dieses Tutorial auf Bootstrap 3 und nutzt für die Effekte das animate.css Framework.

Mittlerweile sieht man den Effekt fast auf jeder Seite, überfährt mit der Maus ein Bild, gibt es einen Hovereffekt. Manchmal nur als Rückmeldung manchmal mit zusätzlichen Informationen. Das folgende Tutorial zeigt, wie man auf einfache Art und Weise diesen Effekt in ein Bootstrap Template einbaut. Dabei wird sich auf ein Minimum an zusätzlichen CSS Klassen und Containern beschränkt, so dass man beim Styling auf die vorhandenen Bootstrap Klassen zurückgreifen kann. Hier vorab eine Vorschau: Demo

HTML Markup – Thumbnail Grid

Das erstellen eines fließenden Thumbnail Grids ist einfach in Bootstrap. Hier bediene ich mich eines Code Schnipsels von Bootsnipp welches die Thumbnails in einer Liste ausgibt.

Wie zu sehen ist, wird sich hier fast ausschließlich vorhandener Bootstrap Elemente bedient. Zwei Ausnahmen; ich gebe meiner Thumbnails Liste eine „id„, damit ich sie im weiteren Verlauf gezielt per jQuery ansprechen kann. Das zweite Nicht-Bootstrap Element sind die Container „caption“ innerhalb jedes „thumbnail“ Listenelements. Im „caption“ Container sind die Infos enthalten, welche beim Mausover angezeigt werden sollen. Also eine Überschrift, ein kleiner Beschreibungstext sowie zwei Links. Die Links sind als Bootstrap Button gestaltet und enthalten „rel=’tooltip‚“ und ein „title“ Attribut, was später für die Ausgabe der Tooltips notwendig ist.

Ein bisschen CSS

Was tun wir hier? Wir weisen dem „thumbnail“ Container position=“relative“ zu, damit wir darin enthaltene Elemente absolute ausrichten können. Zusätzlich wird mit overflow=“hidden“ verhindert, dass evtl. zu lange Inhalte des „caption“ Containers abgeschnitten werden. Der „caption“ Container wird standardmäßig über display=“none“ ausgeblendet, er soll ja erst beim Mausover angezeigt werden, das erledigt später jQuery für uns. Ansonsten wird in der „caption“ Klasse die Größe gesteuert, in diesem Fall 100% Höhe und Breite, damit das ganze Bild überlappt wird. Hintergrundfarbe und Schriftfarbe ist hier nach Wunsch möglich.

Ein bisschen jQuery

Mit jQuery erzeugen wir nun den Effekt, so dass sich der „caption“  Container beim Hover über das Thumbnail legt. Gleichzeitig initialisieren wir den Bootstrap Tooltip, damit beim Hover der beiden Buttons ein schicker Tooltip erscheint.

Wir beginnen natürlich mit dem Einbindung von jQuery und des Bootstrap Javascriptes. Im Beispielcode oben beides über CDN, hier könnt ihr natürlich auch eure lokale Version einbinden. Nachdem die Seite also geladen ist, wird als erstes der Tooltip initialisiert und zwar betrifft das alles Link mit dem Attribut „rel=’tooltip‚. Angezeigt wird der Inhalte des „title“ Attributes. Der Rest ist schnell erklärt. Ich generiere eine jQuery hover Funktion wenn ich mit der Maus über die Class „thumbnail“ fahre, wenn diese sich innheralb meiner Liste mit der angegeben ID befindet, in meinem Fall id=“hover-cap-4col“. Erste Funktion regelt „mouseenter“, die zweite entsprechend „mouseleave“.

Schlussbemerkung

Die gezeigte Variante sollte mit allen Thumbnail Grid Varianten funktionieren, also egal ob ihr 6 Spalten Thumbnails oder nur 2 Spalten habt. Im Demo sind entsprechend ein paar Varianten eingebaut. Die Demoseite könnt ihr speichern, sie greift komplett auf CDN Quellen zurück, so dass ihr ohne zusätzliche Files direkt eine lauffähige Version habt. Auf responsive Design wurde das Script nicht optimiert, da ich es so einfach wie möglich halten wollte. Je nach Bildschirmauflösung sollte hier noch ein paar Anpassungen vorgenommen werden. Schriftgröße der Überschrift, evtl. Ausblenden des  Beschreibungstextes usw.

DEMO

Hinweis in eigener Sache!
Das Script ist meine persönliche Lösung, ich erhebe keinen Anspruch darauf, dass diese auch die Beste ist. Änderungen, Verbesserungen und Optimierungen am Script sind ausdrücklich erlaubt. Die Benutzung des Scriptes erfolgt auf eigene Gefahr. Für eventuelle Schäden, die durch den Einsatz bzw. die Nutzung des Scriptes entstehen, übernehme ich keine Haftung.
2.04.2013 Autor: Rico Loschke Kategorie: Bootstrap 5



4 Antworten zu “Tutorial: Bootstrap – Thumbnail Hover Caption mit Tooltip”

  1. jim sagt:

    Nice. Danke.

  2. Jacob sagt:

    Aber wozu benötigt es dafür Javascript? Tut es nicht auch eine ganz normale CSS-Transition?

    • sevenx sagt:

      Na klar geht es auch ohne Javascript. Ich habe da gar ehrlich gesagt gar nicht nachgedacht, weil ich die paar Zeilen jQuery Code als die für mich effektivste Lösung empfand.

  3. robert sagt:

    i’m using col-md-3 class and it’s only works on the first one! the three rest not do any action on hover!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.