Mit jQuery Title-Tags verschönern
Anzeige Hier werben
HTML Aufbau
Zuerst einmal müsst Ihr selbstverständlich die jQuery-Lib einbauen, bevor es losgehen kann.
Nun brauchen wir in verschiedenen Elementen Title-Tags. Dazu folgt ein kurzes Beispiel:
1 2 3 | <a href="#" title="Ein Titel">Ein Titel</a>
<span title="Noch ein Titel">Noch ein Titel</span>
<div title="Und ein letzter Titel">Und ein letzter Titel</div>
|
(Das Ganze kann später mit jedem Tag genutzt werden.)
jQuery
Bevor wir mit dem eigentlich anfangen, müssen wir jQuery mitteilen, dass der Code erst ausgeführt werden soll, wenn die HTML-Elemente geladen wurden.
1 2 3 | $(document).ready(function() {
});
|
Um den Tooltip nutzen zu können brauchen wir natürlich zuerst ein Element, wo die Texte des Titels hineinkönnen. Dafür erstellen wir über jQuery einen einfachen Divcontainer mit einer ID, der natürlich nicht zu sehen sein soll. Zugleich speichern wir das Ganze auch in eine Variable ab, um später darauf zurückgreifen zu können.
1 2 3 4 | $(document).ready(function() {
var jqueryTooltip = $('<div id="jqueryTooltip"></div>');
$('body').append(jqueryTooltip);
});
|
Dann rufen wir alle Elemente bei einem "Hover" und "Over" ab, die einen Title-Tag haben.
Der Befehl $('!*[title^=""]') hat mehrere Funktionen in einem. Das "*" sagt, dass alle Elemente aufgerufen werden sollen. Mit dem Befehl [title^=""] rufen wir alle Elemente ab, die einen Title-Tag besitzen und mit "!" sagen wir das nur Elemente genommen werden sollen, die zwar einen Title-Tag haben, aber nicht leer sind. Mit dem Event "hover" haben wir zudem gleich zwei Funktionen in einer (Mouseover und Mouseout). Das "e" in "function(e)"wird später noch gebraucht und erklärt.
1
2
3
4
5
6
7
8
9 | $(document).ready(function() {
var jqueryTooltip = $('<div id="jqueryTooltip"></div>');
$('body').append(jqueryTooltip);
$('!*[title^=""]').hover(function(e) {
}, function() {
});
});
|
Zuallererst kümmern wir uns um den Mouseover (erstere Funktion). Erklärungen sind direkt im Code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(document).ready(function() {
var jqueryTooltip = $('<div id="jqueryTooltip"></div>');
$('body').append(jqueryTooltip);
$('!*[title^=""]').hover(function(e) {
/* Das aktuelle Element wird in einer Variable gespeichert. Dies hat vor allem performance gründe*/
var ae = $(this);
/* Der Text des Title-Tags wird ebenfalls in eine Variable gespeichert (Siehe Anmerkung 1.0) */
var title = ae.attr('title');
/*damit wir bei einem Mouseover nur unseren "tollen Title-Tag" bekommen leeren wir den aktuellen Title-Tag */
ae.attr('title', '');
/* Als nächstes speichern wir unseren aktuellen Text um später (bei einem Mouseout) denn Text des Title-Tags wieder einfügen zu können */
ae.data('titleText', title);
/* Jetzt fügen wir den Text des Title-Tags in unseren Tooltip ein */
jqueryTooltip.html(title);
/* damit der tooltip an der richtigen stelle angezeigt wird brauchen wir auch noch einige CSS Angaben. Mit e.pageX und e.pageY greifen wir auf die X und Y Koordinaten des Mauszeigers zu. Natürlich wird auch das wieder in Variablen gespeichert. Natürlich brauch dieser auch Abstände zur Maus sonst sieht es komisch aus */
var _t = e.pageY + 20;
var _l = e.pageX + 20;
/* diese angaben fügen wir nun auch noch unserem Tooltip hinzu mit dem Befehl "css" (Siehe hierzu Anmerkung 1.1) */
jqueryTooltip.css({ 'top':_t, 'left':_l });
/* Nun sind wir fast fertig. Zuletzt müssen wir den Tooltip nur noch anzeigen lassen (Siehe Anmerkung 1.2) */
jqueryTooltip.show(0);
}, function() {
});
});
|
Anmerkungen
- 1.0:
mit ".attr()" lassen sich alle Attribute (href, id, title, alt...) aus einem Tag ziehen (z.B.: .attr('href')) oder/und überschreiben (z.B.: .attr('href','#neuer-anker')). - 1.1:
mit ".css()" kann man alle CSS Einstellungen über jQuery verändern. Bei nur einer Angabe nimmt man z.B.: .css('width','500px') und bei mehreren Angaben .css({'width':'500px', 'height':'100px'}) - 1.2:
es gibt viele verschiedene Versionen Sachen einblenden zu lassen, wie z.B. Faden (.fadeIn(500)), Sliden (.slideDown(500)) oder beides zugleich (.show(500)). Die Zahlen geben hierbei immer die Geschwindigkeit an, wie schnell etwas sichtbar sein soll. Neben diesen drei Funktionen gibt es auch noch die Funktion .animate(), womit man eine eigene Animation erstellen kann.
Nachdem wir nun den Tooltip anzeigen lassen können, wollen wir ihn natürlich auch wieder ausblenden. Erklärungen sind wieder direkt im Quellcode enthalten.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | $(document).ready(function() {
var jqueryTooltip = $('<div id="jqueryTooltip"></div>');
$('body').append(jqueryTooltip);
$('!*[title^=""]').hover(function(e) {
/* Das aktuelle Element wird in einer Variable gespeichert. Dies hat vor allem performance gründe*/
var ae = $(this);
/* Der Text des Title-Tags wird ebenfalls in eine Variable gespeichert (Siehe Anmerkung 1.0) */
var title = ae.attr('title');
/*damit wir bei einem Mouseover nur unseren "tollen Title-Tag" bekommen leeren wir den aktuellen Title-Tag */
ae.attr('title', '');
/* Als nächstes speichern wir unseren aktuellen Text um später (bei einem Mouseout) denn Text des Title-Tags wieder einfügen zu können */
ae.data('titleText', title);
/* Jetzt fügen wir den Text des Title-Tags in unseren neuen "tollen Title-Tag" ein */
jqueryTooltip.html(title);
/* damit der tooltip an der richtigen stelle angezeigt wird brauchen wir auch noch einige CSS Angaben. Mit e.pageX und e.pageY greifen wir auf die X und Y Koordinaten des Mauszeigers zu. Natürlich wird auch das wieder in Variablen gespeichert. Natürlich brauch dieser auch Abstände zur Maus sonst sieht es komisch aus */
var _t = e.pageY + 20;
var _l = e.pageX + 20;
/* diese angaben fügen wir nun auch noch unserem neuen "tollen Title-Tag" hinzu mit dem Befehl "css" (Siehe hierzu Anmerkung 1.1) */
jqueryTooltip.css({ 'top':_t, 'left':_l });
/* Nun sind wir fast fertig. Zuletzt müssen wir den neuen "tollen Title-Tag" nur noch anzeigen lassen (Siehe Anmerkung 1.2) */
jqueryTooltip.show(0);
}, function() {
/* zuerst speichern wir wieder die variable ab */
var ae = $(this);
/* dann lassen wir den neuen "tollen Title-Tag" wieder verschwinden (Siehe auch Anmerkung 2.0) */
jqueryTooltip.hide(0);
/* jetzt brauchen wir natürlich den text auch wieder der eigentlich im Title-Tag steht. Da wir diesen vorhin gespeichert haben, können wir ihn einfach auslesen lassen */
var title = ae.data('titleText');
/* wir fügen wieder den Text des Title-Tags ein */
ae.attr('title', title);
});
});
|
Kurz und schmerzlos. Was ist aber wenn nun jemand über ein Element mit der Maus fährt? Momentan würde der Tooltip an erster Stelle stehen bleiben. Da dies aber unschön aussähe, kommt noch ein weiterer Event-Handler hinzu und zwar Mousemove.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | $(document).ready(function() {
var jqueryTooltip = $('<div id="jqueryTooltip"></div>');
$('body').append(jqueryTooltip);
$('!*[title^=""]').hover(function(e) {
/* Das aktuelle Element wird in einer Variable gespeichert. Dies hat vor allem performance gründe*/
var ae = $(this);
/* Der Text des Title-Tags wird ebenfalls in eine Variable gespeichert (Siehe Anmerkung 1.0) */
var title = ae.attr('title');
/*damit wir bei einem Mouseover nur unseren "tollen Title-Tag" bekommen leeren wir den aktuellen Title-Tag */
ae.attr('title', '');
/* Als nächstes speichern wir unseren aktuellen Text um später (bei einem Mouseout) denn Text des Title-Tags wieder einfügen zu können */
ae.data('titleText', title);
/* Jetzt fügen wir den Text des Title-Tags in unseren neuen "tollen Title-Tag" ein */
jqueryTooltip.html(title);
/* damit der tooltip an der richtigen stelle angezeigt wird brauchen wir auch noch einige CSS Angaben. Mit e.pageX und e.pageY greifen wir auf die X und Y Koordinaten des Mauszeigers zu. Natürlich wird auch das wieder in Variablen gespeichert. Natürlich brauch dieser auch Abstände zur Maus sonst sieht es komisch aus */
var _t = e.pageY + 20;
var _l = e.pageX + 20;
/* diese angaben fügen wir nun auch noch unserem neuen "tollen Title-Tag" hinzu mit dem Befehl "css" (Siehe hierzu Anmerkung 1.1) */
jqueryTooltip.css({ 'top':_t, 'left':_l });
/* Nun sind wir fast fertig. Zuletzt müssen wir den neuen "tollen Title-Tag" nur noch anzeigen lassen (Siehe Anmerkung 1.2) */
jqueryTooltip.show(0);
}, function() {
/* zuerst speichern wir wieder die variable ab */
var ae = $(this);
/* dann lassen wir den neuen "tollen Title-Tag" wieder verschwinden (Siehe auch Anmerkung 2.0) */
jqueryTooltip.hide(0);
/* jetzt brauchen wir natürlich den text auch wieder der eigentlich im Title-Tag steht. Da wir diesen vorhin gespeichert haben, können wir ihn einfach auslesen lassen */
var title = ae.data('titleText');
/* wir fügen wieder den Text des Title-Tags ein */
ae.attr('title', title);
}).mousemove(function(e) {
/* wir lassen uns erneut die aktuelle Mausposition ausgeben mit abständen zum mauszeiger */
var _t = e.pageY + 20;
var _l = e.pageX + 20;
/* und wieder fügen wir das ganze dem Tooltip hinzu */
jqueryTooltip.css({ 'top':_t, 'left':_l });
});
});
|
Was habe ich nun genau gemacht? Ich hätte auch statt direkt hinter den Klammern, das mousemove neu zuweisen können ( $('!*[title^=""]').mousemove(function(............ ), jedoch wäre das auch nicht auf Dauer Performance freundlich. Deswegen habe ich kurzerhand die Funktionen miteinander verkettet. Das geht ganz einfach, indem man ans Ende der Klammern kein Semikolon (";") setzt, sondern direkt einen weiteren Eventhandler.
Cascading Style Sheet
Zuletzt müssen wir unseren Tooltip noch stylen!
1
2
3
4
5
6
7 | #jqueryTooltip {
position:absolute; /* das ist zwingend notwendig, damit der Tooltip der Maus folgen kann */
display:none; /* auch wichtig damit der Tooltip leer nicht gezeigt wird */
border:1px solid #000;
background:#fff;
padding:0.25em;
}
|
Alle Angaben sind hierbei komplett frei, außer den ersten beiden!
Zusammenfassung
Eigentlich ist Javascript mit jQuery gar nicht so schwer! Es ist kurz und bündig und man kann schon mit wenigen Zeilen tolle Effekte zaubern! Zudem funktioniert auch die Seite noch, wenn Javascript ausgestellt ist. Dann werden zwar die alten hässlichen Title-Tags gezeigt, aber niemand wird von einer Seite ausgeschlossen.
Das ganze natürlich auch als Download
Sollte oben ein Fehler sein, gibt es das Ganze auch nochmal als Download, welcher garantiert funktioniert!
Bei Fragen: unten gibt es die Kommentar-Funktion ;)
Downloads
Für diesen Artikel stehen zusätzliche Dateien zum Herunterladen bereit. Der Download ist nur für registrierte Benutzer möglich. Die kostenlose Registrierung dauert nur wenige Sekunden.
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "Mit jQuery Title-Tags verschönern" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Mit jQuery Title-Tags verschönern" hier bearbeiten.
-
Yannic Stadler, hat mit damals jungen 14 Jahren das WWW entdeckt und es auf Anhieb sympathisch gefunden. Zurzeit macht er eine Ausbildung zum Mediengestalter bei einer namhaften Agentur.
-
Derzeit besucht Ninos Ego die Fachoberschule Friedberg. Neben diversen Freizeittätigkeiten beschäftigt er sich gerne am Computer. Derzeit administriert er freizeitmäßig Server und arbeitet an einigen Projekten. Weitere Informationen über ihn, seiner Referenzen u.d.g. findet ihr auf seinem Blog (ninosego.de) oder ihr kontaktiert ihn einfach.
-
Student für Interfacedesign auf Diplom im 7 Semester an der Merz-Akademie Stuttgart. Portfolio: Webdesign und Webentwicklung in Stuttgart, Böblingen und Sindelfingen
Problem mit Tooltip
Wenn ich mit dem Tooltip an den Fensterrand ankomme, wird der Tooltip zweizeilig oder eben mehr. Das funktioniert einwandfrei.
Handelt es sich aber um einen Tooltip der auf einem Element mit position: absolute und welches nur mittels hover angezeigt wird und dieser Tooltip dann den Fensterrand berührt. Verschwindet das gehoverte Element.
Berührt der Tooltip nicht den Fensterrand funktioniert alles einwandfrei.
Woran kann das also liegen?
tags vollständig parsen
hi,
super idee alles einmal ausführlich aufzuschreiben. das hilft ungemein den einstieg zu vertiefen.
leider habe ich probleme, wenn es ein HTML attribut
name="title"
z.b. in einem input-tag gibt.
dort wird dann auch der wert durch JS getauscht (was ja nicht sein sollte) und das formular geht kaputt.
könntest du/ihr das sonst noch einbauen? ich habe es bereits versucht, jedoch konnte ich die XOR operatoren irgendwie nicht richtig zusammensetzen... :-/
grüße,
olli
Tooltip wird bei deaktiviertem <input> nicht angezeigt
Endlich mal jemand, der ausführlich erklärt, was genau passiert. So kann man das auch mal leicht an die eigenen Bedürfnisse anpassen. Vielen Dank dafür.
Leider hab ich trotzdem ein Problem - was aber nicht an der Erklärung liegt :)
Und zwar habe ich einige Checkboxen, die ggf. deaktiviert (disabled) sind. In diesem Fall funktioniert das Script leider nicht mehr. Gibt es dafür eine Lösung? Es gibt ja im Code eigentlich nichts, was deaktivierte Elemente aussperrt, oder doch?
Performance
Es wäre doch performanter wenn man die Elemente die du über den Selector ($('!*[title^=""]').hover(function(e){) holst, zwischenspeichert und dann via Iteration über das Array die Events hinzufügst.
Ob das in jQuery genauso realisiert werden kann weiß ich nicht, in MooTools auf alle Fälle schon.
Erweiterung
In Kürze wird noch eine Erweiterung hinzukommen, das die Tooltips später auch nach links bzw. oben ausgerichtet werden, wenn diese an das Browserfenster ecken sollten.