Tooltipps mit CSS und Javascript

Den Tooltipp kennen Sie – wird ein Seitenelement berührt, öffnet sich ein Fensterchen mit weiteren Informationen. In diesem Tooltipp-Kompendium erfahren Sie alles über den gemeinen Tooltipp (der Tooltipp an sich), Luxus-Tooltipps (mit JavaScript), unkomplizierte CSS-Tooltipps (ohne JavaScript) und Über-Tooltipps (mit Grafik und JavaScript).

Der gemeine Tooltipp
Der Tooltipp in seiner einfachsten Form braucht nur das HTML-Attribut title.

 <p>

Tooltipp vulgaris - <span title="Der gemeine ...">TESTEN</span>

</p>

So sieht er aus, Der Gemeine Tooltipp (Tooltipp vulgaris)

Livetest: Tooltipp vulgaris – TESTEN

Es handelt es sich um ein Universalattribut, d.h. so gut wie jedes Element auf der Seite kann mit einem Titel versehen werden. Die größten Nachteile dieser Methode: Ob und wie die Tooltipps angezeigt werden entscheidet allein der Browser. Webmaster haben keinen Einfluss auf die Formatierung, Benutzer können ohne zusätzliche Markierung nicht erkennen, wo ein Tooltipp wartet.

Luxus-Tooltipp mit JavaScript
Ganz anders beim JavaScript gestützten Luxus-Tooltipp, hier hat der Webmaster die volle Kontrolle – solange JavaScript eingeschaltet ist.

Wirkt amtlich, Luxus-Tooltipp mit JavaScript

Live Demo im neuen Fenster: Luxus-Tooltipp

Eingebaut wird der Tooltipp mit onmouseover=”return escape(‘Lorem ipsum … ‘)” wie in dem Beipiel unten:

      <p>
<a href="#" onmouseover="return escape('Lorem ipsum .... ')">TESTEN</a>
  </p>

Als letzter Eintrag im body erfolgt die Verlinkung mit der benötigten JavaScript-Bibliothek wz_tooltip.js:

      <script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>

Alle Einstellungen wie Fenstergröße, Farben, Schriftart, Transparenz und Verzögerung erfolgen direkt im Script, dort sind die Einstellmöglichkeiten kommentiert.

JavaScript und Beispiel Luxus-Tooltipp zum Download

CSS-Tooltipp ohne JavaScript
Gestaltungsmöglichkeiten und Kontrolle bietet auch der CSS-Tooltipp. Er hat keinen Verzögerungseffekt und folgt nicht dem Mauszeiger, dafür funktioniet er auch bei abgeschaltetem JavaScript.

Verblüffend Luxuriös und doch reines CSS.

Live Demo im neuen Fenster: CSS-Tooltipp

       <p> CSS-Tooltipp (ohne JavaScript)      <a href="#">TESTEN<span>Lorem ipsum...</span></a> </p>      

<p> <span class="tipp">TESTEN 2<span>Tooltipp ohne Link...</span></span>   </p>

Zum Einbau des Tooltipps in Links reicht eine span mit dem Tooltipp-Text, für andere Elemente brauchen wir eine zusätzliche span class=”tipp” (s.o). Bedauerlicherweise erfüllt der Internet Explorer nicht die W3C-Standards und :hovert nur bei Links. Webmaster haben die Möglichkeit alle Tooltipps in Links zu verwandeln, IE-Nutzern die Tipps nicht zu zeigen oder ihnen mit JavaScript unter die Arme zu greifen. Hier die letztere Alternative:

      body {    background-image: url(bg-tipp.gif);     behavior:url("csshover.htc"); } 

        a, .tipp {      position: relative;     } 

        a span, .tipp span {   display: none;   font: 11px arial,helvetica,sans-serif;   color: #000066;   }   

        a:hover, .tipp:hover {   background-color: transparent;   }   

        a:hover span, .tipp:hover span {        width: 300px;   position: absolute;     top: 30px;      left: 30px;     display: block;         background: #e6ecff;    border: 1px solid #003399;      text-decoration: none;  padding: 3px;   opacity: .8;    filter: alpha(opacity=80);   }

Wichtig für Internet Explorer Nutzer ist die Datei csshover.htc, mit der wir ihre Browserschwäche ausbügeln. Die anderen Angaben dienen der Formatierung von Schriftart, Größen, Farben und Transparenz.

csshover.htc und Beispiel CSS-Tooltipp zum Download

Über-Tooltipp(mit Grafik und JavaScript
Manchmal muss es etwas mehr sein, empfohlen für wirklich eindrucksvolle Tooltipps unter Einsatz aller Mittel:

Unser bester Tooltipp, der Über Tooltipp

Live Demo im neuen Fenster: Über-Tooltipp

Benötigt werden das JavaScript BubbleTooltips.js, das Stylesheet bt.css und das Hintergrundbild für den Tooltipp bt.gif. Zusammengebaut wird wie folgt:

      <script type="text/javascript" src="BubbleTooltips.js"></script>
      <script type="text/javascript">window.onload=function()
{enableTooltips(null,'a')};
</script> 

Im head verlinken wir das JavaScript und rufen die Funktion auf. Statt null in der Parameterübergabe {enableTooltips(null,’a')} kann eine id angegeben werden in der Tooltipps angezeigt werden, statt ‘a’ kann ein anderes Element mit Tooltipps versehen werden. In der Standardeinstellung wird das title-Attribut in jedem anchor als Tooltipp angezeigt.

      <p> &Uuml;ber-Tooltipp (mit Grafik und JavaScript)
    <a href="#" title="Lorem ipsum...">TESTEN</a> </p>

  <p> <a title="<strong>Formatierter</strong>
    Tooltipp an <em>Anchor</em>-Element.">TESTEN 2</a> </p> 

Den Tooltipp zum anchor können wir mit Standard-HTML im title-Tag ohne weiteres feinformatieren (s.o.).

      .tooltip {        font: 11px arial,helvetica,sans-serif;    color: #000066;       text-align: center;     text-decoration: none;  width: 200px;    } 

   .tooltip b.bottom {  background: url(bt.gif) no-repeat bottom;               padding: 3px 8px 15px; } 

   .tooltip span.top {  background: url(bt.gif) no-repeat top;  padding: 30px 8px 0; } 

Das Stylesheet bt.css verlinken wir in diesem Fall nicht selbst, es wird aus dem JavaScript heraus aufgerufen. Die Einstellungen sind für Schriftart, Größe, Farben und das geladene Hintergrundbild. Das Script BubbleTooltips.js selbst braucht in der Regel nicht editiert zu werden.

BubbleTooltips.js und Beispiel Über-Tooltipps zum Download

Material:

• Alle Tooltipps zum Download – ZIP-Archiv

Credits: Walter Zorn, Peter Nederlof, Alessandro Fulciniti

Erstveröffentlichung 31.07.2006

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.