Ein Tooltip (manchmal auch als Quick Info bekannt) ist ein kleines Popup. Es wird gerne bei Links und Bildern eingesetzt um zusätzliche Informationen anzuzeigen. Im HTML Markup wird ein Tooltip durch das Setzen des Attributs title mit dem Element verknüpft. Das Design des Tooltips ist browserabhängig. Genau hier setzt dieses jQuery Plugin an. Einheitliche Tooltips über alle Browser hinweg und dabei sind der Kreativität durch individuelle Gestaltungsmöglichkeiten per HTML und CSS keine Grenzen gesetzt.
Das Plugin
Und nun zum Code des Plugins. Die Anwendung des Plugins wird im nächsten Abschnitt erklärt.
// -------------------------------------------------------------------
// ------------- Autor: Patrick Saar - www.patrick-saar.de -----------
// ------------- jQuery Plugin - Individual tooltip v. 1.0 -----------
// ------------------ Copyright 2012 Patrick Saar --------------------
// -------------------------------------------------------------------
(function ($) {
$.fn.details = function (settings) {
return this.each(function () {
// Global variables
var parent = $(this);
var timeout;
// Set required selectors
var attributes = {
wrapper: {
id: 'jquery-plugin-details',
jquery: '#jquery-plugin-details'
},
arrow: {
id: 'jquery-plugin-details-arrow',
jquery: '#jquery-plugin-details-arrow'
},
rect: {
id: 'jquery-plugin-details-rect',
jquery: '#jquery-plugin-details-rect'
}
};
var init = {
// Tooltip data
data: parent.attr('title'),
// Set default values, if property is not set
setDefaults: function () {
if (settings.arrow.width == null) settings.arrow.width = 20;
if (settings.arrow.color == null) settings.arrow.color = '#ccc';
if (settings.arrow.direction == null) settings.arrow.direction = 'up';
if (settings.arrow.pos == null) settings.arrow.pos = 0;
if (settings.pos.x == null) settings.pos.x = parent.width() / 2;
if (settings.pos.y == null) settings.pos.y = parent.height() / 2;
if (settings.cssRect == null) settings.cssRect = {};
if (settings.delayHover == null) settings.delayHover = 100;
if (settings.fade == null) settings.fade = 100;
},
// Converts arrow direction to a css triangle code
directionToCSS: function (direction) {
var css;
if (direction === 'left')
css = 'transparent' + settings.arrow.color + ' transparent transparent';
else if (direction === 'right')
css = 'transparent transparent transparent' + settings.arrow.color;
else if (direction === 'down')
css = settings.arrow.color + ' transparent transparent transparent';
else
css = 'transparent transparent ' + settings.arrow.color + ' transparent';
return css;
},
// Position of tooltip rectangle relative to the triangle
posRect: function (direction) {
var x, y;
if (direction === 'left') {
x = settings.arrow.width * 2;
y = -settings.arrow.width * 2 - settings.arrow.pos;
}
else if (direction === 'right') {
x = -$(attributes.rect.jquery).outerWidth();
y = -settings.arrow.width * 2 - settings.arrow.pos;
}
else if (direction === 'down') {
x = -settings.arrow.pos;
y = -$(attributes.rect.jquery).outerHeight() - settings.arrow.width * 2;
}
else {
x = -settings.arrow.pos;
y = 0;
}
return { top: y, left: x };
},
// Enables negative value for arrow.pos
// Negative value positioning triangle relative to the right (for arrow directions up/down) or bottom (for arrow directions left/right) of the rectangle
posArrow: function (pos, direction) {
var dimRect;
if (direction === 'up' || direction === 'down')
dimRect = $(attributes.rect.jquery).outerWidth();
else
dimRect = $(attributes.rect.jquery).outerHeight();
pos = (pos < 0) ? (dimRect + pos - settings.arrow.width * 2) : pos;
return pos;
}
};
// Set default CSS values of the tooltip
var cssDefaults = {
wrapper: function () {
$(attributes.wrapper.jquery).css({
'position': 'absolute',
'z-index': 100000000,
'top': settings.pos.y - settings.arrow.width,
'left': settings.pos.x - settings.arrow.width
});
},
arrow: function () {
$(attributes.arrow.jquery).css({
'width': 0,
'height': 0,
'border-width': settings.arrow.width,
'border-style': 'solid',
'border-color': init.directionToCSS(settings.arrow.direction)
});
},
rect: function () {
$(attributes.rect.jquery).css({
'background': '#ccc'
});
},
rectPos: function () {
$(attributes.rect.jquery).css({
'position': 'relative',
'top': init.posRect(settings.arrow.direction).top,
'left': init.posRect(settings.arrow.direction).left
});
}
};
// Converts HTML entities to HTML markup
var text = {
htmlEntities: function (str) {
str = str.replace('<', '<');
str = str.replace('>', '>');
str = str.replace('"', '"');
return str;
}
};
// Mouse interaction for hover()
var mouse = {
enter: function () {
if (parent.css('position') !== 'absolute' && parent.css('position') !== 'fixed') parent.css({ 'position': 'relative' });
init.setDefaults();
$('<div id="' + attributes.wrapper.id + '"><div id="' + attributes.arrow.id + '"></div><div id="' + attributes.rect.id + '">' + text.htmlEntities(init.data) + '</div></div>').fadeIn(settings.fade).appendTo(parent);
// CSS default styling
cssDefaults.wrapper();
cssDefaults.arrow();
cssDefaults.rect();
settings.arrow.pos = init.posArrow(settings.arrow.pos, settings.arrow.direction);
// CSS individual styling
$(attributes.rect.jquery).css(settings.cssRect);
cssDefaults.rectPos();
},
leave: function () {
$(attributes.wrapper.jquery).fadeOut(settings.fade / 2, function () {
parent.attr({ 'title': init.data });
$(this).remove();
});
}
};
// Executes mouse interaction, which is described above
parent.hover(function () {
if (!init.data) return;
parent.attr({ 'title': '' });
timeout = setTimeout(function () { mouse.enter(); }, settings.delayHover);
},
function () {
if (!init.data) return;
clearTimeout(timeout);
timeout = null;
mouse.leave();
});
});
}
})(jQuery)Die Einstellungsmöglichkeiten in jQuery
Als Tooltip-Text wird der Wert des Attributs title genommen. Das hat den Vorteil, dass bei deaktiviertem JavaScript der browserabhängige Tooltip angezeigt wird. Nun zur Verwendung und zu den Einstellungsmöglichkeiten des Plugins. Als Einstellungen nehme ich hier mal die Werte aus dem obigen Beispiel.
$('.tooltip-example').details({
arrow: {
width: 12,
color: '#eee',
direction: 'up',
pos: 20
},
pos: {
x: 50,
y: 50
},
cssRect: {
'padding': '2px 4px',
'white-space': 'nowrap',
'font-family': 'Verdana',
'font-size': '12px',
'background': '#eee',
'-webkit-box-shadow': '2px 2px 3px #333',
'-moz-box-shadow': '2px 2px 3px #333',
'box-shadow': '2px 2px 3px #333',
'-webkit-border-radius': '2px',
'-moz-border-radius': '2px',
'-o-border-radius': '2px',
'border-radius': '2px'
},
delayHover: 200,
fade: 200
});Dem Plugin übergeben wir also einen Wert vom Typ object. Alle Eigenschaften von object sind optional. Falls eine Eigenschaft nicht gesetzt ist, wird vom Plugin ein Standardwert vergeben. Die Standardwerte können der Methode init.setDefaults() ab Zeile 34 des Plugin-Codes entnommen werden. Kommen wir nun zu den einzelnen Eigenschaften und deren Bedeutung.
arrow: {
width: 12,
color: '#eee',
direction: 'up',
pos: 20
}
- width setzt die Breite des Dreiecks in Pixel. Erwartet einen Integer-Wert ohne Einheit.
- color setzt die Farbe des Dreiecks. Erwartet einen String in Form eines validen Farbwertes, also eines Hex-Wertes, rgb/rgba-Wertes oder hsl/hsla-Wertes.
- direction setzt die Richtung der Spitze des Dreiecks. Erwartet einen String mit einem Wert aus folgender Liste: up, down, left, right.
- pos setzt den Abstand des Pfeils in Pixel zum linken Rand des Rechtecks, falls für direction up oder down gesetzt wurde. Setzt den Abstand des Pfeils in Pixel zum oberen Rand des Rechtecks, falls für direction left oder right gesetzt wurde. Erwartet einen Integer-Wert ohne Einheit. pos kann auch negative Werte verarbeiten. Dann wird das Dreieck relativ zum rechten bzw. unteren Rand des Rechtecks positioniert.
pos: {
x: 50,
y: 50
}Setzt die Spitze des Dreiecks auf diesen Punkt, relativ zum Elternelement. Hier also 50px rechts und 50px unterhalb der linken, oberen Ecke des Elternelements.
- x erwartet einen Integer-Wert ohne Einheit.
- y erwartet einen Integer-Wert ohne Einheit.
cssRect: {
'padding': '2px 4px',
'white-space': 'nowrap',
'font-family': 'Verdana',
'font-size': '12px',
'background': '#eee',
'-webkit-box-shadow': '2px 2px 3px #333',
'-moz-box-shadow': '2px 2px 3px #333',
'box-shadow': '2px 2px 3px #333',
'-webkit-border-radius': '2px',
'-moz-border-radius': '2px',
'-o-border-radius': '2px',
'border-radius': '2px'
}cssRect erwartet CSS Angaben zum Styling des Rechtecks in der gewohnten jQuery Notation.
delayHover: 200delayHover erwartet einen Integer-Wert. Gibt die Verzögerung in Millisekunden an, bis der Tooltip erscheint nachdem der Mauszeiger sich über dem verknüpften Element befindet.
fade: 200fade erwartet einen Integer-Wert. Gibt die Zeit in Millisekunden an, wie lange der Einblendvorgang des Tooltips dauern soll. Der Ausblendvorgang ist im Plugin in Zeile 154 festgesetzt und beträgt fade/2 Millisekunden.
Die Anwendung in HTML
Nachdem wir nun die Einstellungen geklärt haben, kommen wir zum letzten Punkt, dem HTML-Tag. Wieder zitiere ich aus obigem Beispiel.
<div class="tooltip-example" title="Ein schwarzes Rechteck"></div>Und noch mehr Inhalt - Grenzenlose Gestaltungsmöglichkeiten innerhalb des Tooltips
Im title Attribut steht hier nur etwas Text. Wir können allerdings auch HTML Code implementieren und somit den Inhalt des Tooltips individuell gestalten oder sogar Bilder, Links, uvm. einbauen. Wie das geht, zeige ich anhand eines Bildes, dass ich in den Tooltip einbaue. Wir verwenden folgenden HTML-Code.
Wir sehen, dass im title Attribut HTML Entitäten für die Diamantklammern verwendet wurden. Diese werden dann vom Plugin in HTML Markup umgewandelt. Schauen wir uns nun das Ergebnis an.
<div class="tooltip-example"
title="Ein schwarzes Rechteck und noch ein Bild<br /><img src="/images/3/jquery_small.png" style="margin: 5px 0; border: 0" />"
></div>Beispiel
Wir haben zusätzlich zum Text jetzt noch ein Bild ohne viel Aufwand in den Tooltip eingebaut. Hieran kann man sehen, dass auch beim Styling des Inhalts einem keine Grenzen gesetzt sind und man seiner Kreativität nach Lust und Laune freien Lauf lassen kann.
Das Plugin als Download
Unten der Download des Plugins mit den obigen Anwendungsbeispielen und einer minifizierten Version für Performance-Verliebte.
36,57 KB - Downloads: 2592
