Maschinendenk

Prototip - einfache Tooltips mit Prototype

3 Kommentare

Für ein Projekt an dem ich derzeit arbeite, benötigte ich dynamische DHTML Tooltips an verschiedenen Stellen.
Da ich bereits die Prototype.js Bibliothek in dem Projekt verwende, lag es nahe mich nach Tooltips für Prototype umzuschauen.

Mit Prototip von Nick Stakenburg bin ich fündig geworden :)
Prototip ist eine kleine , einfache JS Bibliothek die die Erzeugung solcher Tooltips ermöglicht.

Hier ein Beispiel:
prototip

Zur Verwendung von Prototip muss man lediglich eine zusätzliche JS Datei im HEAD Bereich einbinden.
Diese Datei umfasst nur ca 9KB. Ausserdem kann man die Tooltips beliebig mit CSS stylen, indem man das Prototip.css Stylesheet einbindet.

Auf der Projektseite findet sich eine Dokumentation der verschiedenen Möglichkeiten von Prototip auf Englisch.

Hier deshalb nur ein kurzes Tutorial:

Einbindung
Zunächst binden wir Prototype.js , scriptaculous.js und prototip.js im HEAD Bereich ein.
Scriptaculous ist optional und wird nur benötigt wenn die Tooltips Effekte nutzen sollen.

<head>
<script type = "text/javascript" src = "js/prototype.js"></script>
<script type = "text/javascript" src = "js/scriptaculous.js?load=effects"></script>
<script type = "text/javascript" src = "js/prototip.js"></script>
<link rel="stylesheet" type="text/css" href="css/prototip.css" />
</head>

Erzeugung von Tooltips

Danach ist das hinzufügen neuer Tooltips sehr einfach:

<script type = "text/javascript">
new Tip(element,"inhalt",{optionen});
</script>

Im dritten Parameter der Funktion new Tip können in object literal Notation noch einige andere Optionen übergeben werden:

new Tip(element,"inhalt",{title: "tooltip mit titel"});

So kann man beispielsweise dem Tooltip eine Titelzeile geben.

Weitere Infos findet ihr auf der Projektseite (englisch):
http://www.nickstakenburg.com/projects/prototip/

Viel Spass mit den Tooltips :)


Geschrieben von Philipp

21. Oktober 2007 um 6:17

Veröffentlicht in Code, Javascript, Tutorials

« Friendwatch Beta gestartet
Framework Übersicht aktualisiert »

3 Kommentare zu 'Prototip - einfache Tooltips mit Prototype'

Kommentare abonnieren mit RSS oder TrackBack zu 'Prototip - einfache Tooltips mit Prototype'.

  1. Coole Sache! =) Danke!

    Denis

    21 Okt 07 um 7:33

  2. Was ist mit dem ‘title’-attribut, das erscheint trotzdem überlagert. Kann man das unterbinden?

    Anja

    27 Jan 08 um 6:42

  3. @Anja:
    Auch wenn ich bezweifle, dass Du diesen Kommentar bemerkst, habe ich eine Lösung für dich ;-)

    Mein Skript sieht so aus:
    document.observe('dom:loaded', function() {
    $('div[title]‘).each(function(element) {
    new Tip(element, element.title, {
    style: ‘ajaveeb’
    });
    element.title = ”;
    });
    });
    Mit element.title = ''; wird der Titel beim Überfahren mit der Maus entfernt, so dass er den Tooltip nicht überlagert.

    Benni

    26 Jun 08 um 8:44

Kommentar schreiben