﻿$.fn.tooltip = function () {
    var inhalt = null;
    if ($(this).attr('alt')) {
        inhalt = $(this).attr('alt');
    } else {
        inhalt = $(this).attr('title'); 
    }

    function zeigeTooltip(inhalt, element) {
        var pageX = element.offset().left;
        var pageY = element.offset().top;
        var rightCol = $(window).width() - ($(window).width() / 4);
        var boxWidth = 0; 
        $('<div class="tooltipBox">')
        .css({ 'display': 'none' })
        .html('<div class="leftCorner"></div><div class="middle">' + inhalt + '</div><div class="rightCorner"></div>')
        .appendTo('body'); boxWidth = $('.tooltipBox').width(); if ($('.tooltipBox').height() / 2 > element.height()) { pageY -= (element.height()); }
        if (pageX < rightCol) {
            pageX += element.width();
        } else {
            $('.tooltipBox').addClass('reverse');
            pageX -= boxWidth; 
        }
        $('.tooltipBox').css({ 'left': pageX + 'px', 'top': pageY + 'px', 'display': 'block' });
    }
    $(this).bind({
        mouseenter: function (evt) {
            zeigeTooltip(inhalt, $(this));
        }, mouseleave: function () {
            $('.tooltipBox').remove();
        } 
    });
}
