Kolumne: Dino talks

Bootstrap: Tooltips und Popovers
Kommentare

Tooltips kennt man von Webseiten schon seit den Anfangsjahren der Browser. Allerdings sind Tooltips an dieser Stelle wahrscheinlich das einzige Feature, das seit seiner Anfangszeit nie eine Wandlung erfahren hat. Mit dem Erscheinen von jQuery sind unzählige Plug-ins für die Implementierung attraktiver Tooltip-Effekte entstanden. Der Entwickler sah sich dann mit dem Problem konfrontiert, das beste und geeignetste Tooltip-Plug-in auszuwählen. Twitter Bootstrap greift uns hier unter die Arme und nimmt uns die Auswahl ab. Wie aus der Dokumentation hervorgeht, wurden Tooltips in Bootstrap durch Tipsy inspiriert, eines der bekanntesten jQuery-Tooltip-Plug-ins. Vor allem aber sind benutzerdefinierte und anpassbare Tooltips jetzt zum Preis eines leicht modifizierten SPAN-Elements verfügbar.

Als Tooltips erstmals auf Webseiten auftauchten, waren sowohl Entwickler als auch Benutzer begeistert. Allerdings sind Tooltips ein zweischneidiges Schwert. Zum einen können sie hilfreich sein und genau dann, wenn man sie braucht, kleine Zusatzhäppchen an Informationen liefern. Missbräuchlich verwendet können sie aber auf der anderen Seite ziemlich hässlich und nervend sein. Tooltips erscheinen nämlich automatisch, wenn sich der Mauszeiger über einem markierten Seitenelement befindet und Benutzer haben keine andere Kontrolle darüber, als die Maus vom betroffenen Bereich fernzuhalten. Das richtige Maß für die Anzahl an Tooltips und Pop-up-Fenstern einer Webseite zu finden, ist eine schwierige Kunst und spielt eine große Rolle in der gesamten User Experience. In diesem Artikel möchte ich zunächst kurz die vorgesehene Rolle der Tooltips sowie einige Grundregeln der User Experience zusammenfassen. Danach wird beschrieben, wie sich vollständig benutzerdefinierte (und attraktive) Tooltips in Bootstrap erstellen lassen. Schließlich kommen wir zu anspruchsvollen Formen von Tooltips, die Rich Content und strukturierte Inhalte anzeigen. Diese Komponenten werden gelegentlich auch als Flyout bezeichnet, z. B. in Windows-Store-Apps. Im Bootstrap-Jargon heißen diese Komponenten aber ganz einfach Popovers.

Tooltip oder kein Tooltip?

In erster Linie soll ein Tooltip zusätzliche Informationen über ein Seitenelement bereitstellen. Bei diesem Seitenelement kann es sich um ein Element zum Auslösen einer Aktion wie einem Link oder einer Schaltfläche handeln oder um ein statisches Element wie ein Bild oder auch einen Textblock. Werden Tooltips für Textblöcke verwendet, ähneln sie stark den Randnotizen, die auf Anforderung hin angezeigt werden und sich dann einfach über den Text legen. Für Symbolleistenschaltflächen sind Tooltips in der Regel erforderlich, da der Zweck des Symbols bzw. der Clipart-Grafik nicht immer für das gesamte Publikum offensichtlich ist. Abgesehen davon kann die Einblendung von Tooltips stark subjektiv geprägt sein. Hier einige allgemein anerkannte Regeln:

  1. Der im Tooltip angezeigte Text darf für den Benutzer nicht so wesentlich sein, dass er eine Aktion davon abhängig macht, sondern muss ergänzenden Charakter haben. Beeinflusst ein Text die Entscheidung des Benutzers zu einer Aktion, sollten Sie ihn besser direkt in der Benutzeroberfläche unterbringen.
  2. Bezieht sich der Text auf einen Fehler oder eine Warnung, sollten Sie keinen Tooltip verwenden. In diesem Fall sind ein Popover oder einfach ein Warnungsdialogfeld wahrscheinlich besser geeignet. Auf der anderen Seite sollten Sie überlegen, ob der Benutzer den Inhalt des Tooltips speichern muss (um ihn beispielsweise dem Administrator zu melden). Ist das der Fall, ist ein anderes Steuerelement besser geeignet.
  3. Falls Sie den Eindruck haben, dass ein Tooltip den Benutzer ablenken oder stören könnte, ist das mit großer Wahrscheinlichkeit auch so. Entfernen Sie ihn dann besser oder geben Sie zumindest dem Benutzer die Möglichkeit, Tooltips zu deaktivieren.
  4. Gemäß den vorherigen Regeln sind die nützlichsten Tooltips diejenigen, die wirklich informativen Text zeigen, der aber nicht einfach das wiederholt oder neu formuliert, was bereits auf dem Bildschirm zu sehen ist. Heutzutage zeigen Tooltips meistens Rich Text an, dabei handelt es sich jedoch um statischen Text ohne interaktive Steuerelemente.

Die Erscheinung von Text-Tooltips in Bootstrap anpassen

In HTML können Sie einen Tooltip anzeigen, indem Sie einfach Text in ein HTML-Element (selbst ein einfaches span-Element) verpacken, das mit dem Attribut title versehen ist. Das Attribut title ist normaler Text. Der Tooltip wird durch den Browser angezeigt und unterliegt dessen Implementierung – es gibt keine Möglichkeit, dies zu ändern. Angepasste Tooltips lassen sich nur mithilfe separat erstellter JavaScript-Komponenten anzeigen. Dafür kommen schon seit Jahren jQuery-Plug-ins zum Einsatz und auch mit Twitter Bootstrap lässt sich diese Aufgabe bewerkstelligen. Wie bereits in vorherigen Artikeln erwähnt, liegt der eigentliche Vorteil von Bootstrap nicht in seiner Funktionalität, sondern darin, dass die Bibliothek von Twitter stammt und damit als De-facto-Standard gesehen werden kann.

In Bootstrap ist ein Tooltip ein beliebiges HTML-Element mit dem Attribut data-toggle auf dem Schlüsselwort tooltip. Es versteht sich von selbst, dass das HTML-Element auch über das Attribut title verfügen muss, das den anzuzeigenden Text enthält:

Lorem Ipsum is simply dummy text of the printing and typesetting industry ...

Wenn Sie den obigen Code in eine HTML-Seite einfügen, die Bootstrap CSS und JavaScript-Dateien ordnungsgemäß verknüpft, werden Sie feststellen, dass nichts passiert. Die Bootstrap-Architekten haben sich nämlich dazu entschieden, Tooltips als zu aktivierendes Feature einzurichten. Zur Aktivierung ist ein Skript notwendig. Beachten Sie jedoch: Solange das Default-title-Attribut gefunden wird, zeigt der Browser die integrierte Benutzeroberfläche für Tooltips an.

In Bootstrap ist der folgende Skriptcode erforderlich, um Tooltips zu aktivieren. Sie führen ihn am besten im ready-Ereignis-Handler für die Seite aus:

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

Wie Sie sehen, aktiviert der Code nicht einfach einen bestimmten Tooltip, sondern deckt sämtliche Tooltips auf der Seite ab. Um den Einfluss von Bootstrap auf die Webseite und ihre Autoren zu begrenzen, können Sie einfach verlangen, nur das title-Attribut hinzuzufügen und alles andere via Skript zu erledigen:

$(document).ready(function () {
    $("[title]").attr("data-toggle", "tooltip").tooltip();
}); 

Das Skript wählt alle Elemente innerhalb der Seite aus, die mit einem title-Attribut versehen sind, fügt ihnen ein data-toggle-Attribut hinzu und ruft die Methode tooltip() auf ihnen auf. So erreichen Sie, dass nur der dem title-Attribut zugeordnete Text angezeigt wird und zwar in einer grafisch ansprechenderen Form, die Sie in einem gewissen Ausmaß via CSS steuern können. Doch dies ist nur der erste Schritt.

HTML-Tooltips für Bootstrap erstellen

Die Bootstrap Tooltips unterstützen eine Vielfalt von Features, die Sie in normalen Browser-Tooltips nicht finden. Zunächst einmal können Sie einen Pfeilindikator hinzufügen und den Tooltip an einer bestimmten Position in der Nähe des Texts platzieren, auf den er sich bezieht. Als Positionen kommen oben, unten, links und rechts in Frage. Mit der Auswahl von „Auto“ wird der Tooltip an der dem Framework zufolge bestgeeigneten Stelle platziert.

Ein weiteres interessantes Feature ist der HTML-Inhalt. Prinzipiell erlaubt es Bootstrap, beliebige HTML-Inhalte im title-Attribut anzugeben. Der Inhalt wird jedoch nur dann als HTML gerendert, wenn Sie in den tooltip-Optionen das html-Flag setzen:

$("[title]").attr("data-toggle", "tooltip").tooltip({
    placement: 'auto',
    html: true
});

Mit der trigger-Option legen Sie fest, wie der Tooltip ausgelöst werden soll. In der Standardkonfiguration wird er angezeigt, wenn der Mauszeiger über das Element fährt und dieses den Fokus erhält. Durch Klicken können Sie die Triggeroption ändern oder auch nur hinzufügen:

$("[title]").attr("data-toggle", "tooltip").tooltip({
    placement: 'auto',
    html: true,
    trigger: 'click focus hover'
});

Ich persönlich finde etwas störend, dass man bei aktiviertem manuellen Klicken noch einmal auf das jeweilige Element klicken muss, um den Tooltip wieder auszublenden.

Schließlich lässt sich mit Methoden und Triggerereignissen per Programm steuern, wann Tooltips angezeigt oder ausgeblendet werden sollen. Eine umfassende Darstellung der Methoden und Ereignisse finden Sie unter [1].

Popover-Elemente

Konzeptionell sind Tooltips Komponenten, die in der Nähe eines bestimmten Textteils oder Markups angezeigt werden. Es kann aber natürlich auch vorkommen, dass Sie lediglich so etwas wie Windows-8-Flyouts haben möchten. Ein Flyout ist ein HTML-div-Element, das als Drop-down neben einem Element angezeigt wird. Im Bootstrap-Jargon wird ein Flyout als Popover bezeichnet. Popovers fügen kleine überlagerte Inhalte als Text oder HTML hinzu und sind als Erweiterung von Tooltips anzusehen. Besonders interessant werden Popovers dadurch, dass sie sich aus div-Elementen innerhalb der Seite laden lassen. Außerdem können Sie div-Elemente mit Echtzeitdaten füllen, wenn Sie nur ein wenig jQuery und/oder Knockout für die Datenbindung beisteuern.

Erstellen Sie zunächst ein div-Element, das anfangs noch ausgeblendet ist. Als Nächstes konfigurieren Sie den Trigger des Popovers, wobei das eine Schaltfläche oder ein klickbares Element sein kann. Das entspricht in etwa der von den Tooltips bekannten Vorgehensweise. Der einzige Unterschied ist, dass das Attribut data-toggle auf popover gesetzt sein muss:

Mit etwas Skriptcode initialisieren Sie das Popover aus dem Inhalt des div-Elements:

$("#example").popover({
    html: true,
    title: "More Details",
    placement: 'right',
    trigger: 'click',
    content: function () {
      return $("#popover-content").html();
    }
});

Das div-Element wird automatisch geklont und dynamisch in den für den Popover-Effekt erstellten HTML-Block eingebunden. Das Popover erhält eine Standardgröße. Um diese zu ändern, passen Sie die .popover-CSS-Klasse an.

Zusammenfassung: Tooltips und Popovers in Bootstrap

Rich- und HTML-basierte Popovers sind in modernen Webseiten ein Muss. In erster Linie geht es darum, die Seiten für Benutzer attraktiv zu gestalten. Es kann aber auch sein, dass die Menge der anzuzeigenden Informationen sehr groß ist, die Navigation aber trotzdem so einfach wie möglich funktionieren soll. In diesem Fall kann es sehr hilfreich sein, einige Informationen auszublenden und nur bei Bedarf anzuzeigen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -