Du verwendest einen Internet Explorer in einer Version kleiner gleich 8. Dieser Browser wird nicht unterstützt. Bitte aktualisiere mindestens auf Version 9.
Patrick Saar - Codes

Codes

Patrick Saar

jQuery Plugin – Individuelle Tooltips

Ein jQuery-Plugin für browserunabhängige, individuell gestaltbare Tooltips, in denen auch Bilder oder Videos angezeigt werden können.
jQuery

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('&lt;', '<');
                    str = str.replace('&gt;', '>');
                    str = str.replace('&quot;', '"');
                    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: 200

delayHover 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: 200

fade 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&lt;br /&gt;&lt;img src=&quot;/images/3/jquery_small.png&quot; style=&quot;margin: 5px 0; border: 0&quot; /&gt;"
></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: 2432

Diese Seite verwendet Cookies um die beste Nutzerfreundlichkeit zu bieten. Falls Du auf der Seite weitersurfst, stimmst Du der Cookie-Nutzung zu.
Details Ok