<style>

#tooltip

{

font-family: Ubuntu, sans-serif;

font-size: 0.875em;

text-align: center;

text-shadow: 0 1px rgba( 0, 0, 0, .5 );

line-height: 1.5;

color: #fff;

background: #333;

background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );

background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );

background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );

background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );

background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );

background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

border-top: 1px solid #fff;

-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );

-moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );

box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );

position: absolute;

z-index: 100;

padding: 15px;

}

#tooltip:after

{

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 10px solid #333;

border-top-color: rgba( 0, 0, 0, .7 );

content: '';

position: absolute;

left: 50%;

bottom: -10px;

margin-left: -10px;

}

#tooltip.top:after

{

border-top-color: transparent;

border-bottom: 10px solid #333;

border-bottom-color: rgba( 0, 0, 0, .6 );

top: -20px;

bottom: auto;

}

#tooltip.left:after

{

left: 10px;

margin: 0;

}

#tooltip.right:after

{

right: 10px;

left: auto;

margin: 0;

}

</style>

<script>

/*

TOOLTIP

*/

$( function()

{

var targets = $( '[rel~=tooltip]' ),

target = false,

tooltip = false,

title = false;

targets.bind( 'mouseenter', function()

{

target = $( this );

tip = target.attr( 'title' );

tooltip = $( '<div id="tooltip"></div>' );

if( !tip || tip == '' )

return false;

target.removeAttr( 'title' );

tooltip.css( 'opacity', 0 )

.html( tip )

.appendTo( 'body' );

var init_tooltip = function()

{

if( $( window ).width() < tooltip.outerWidth() * 1.5 )

tooltip.css( 'max-width', $( window ).width() / 2 );

else

tooltip.css( 'max-width', 340 );

var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),

pos_top = target.offset().top - tooltip.outerHeight() - 20;

if( pos_left < 0 )

{

pos_left = target.offset().left + target.outerWidth() / 2 - 20;

tooltip.addClass( 'left' );

}

else

tooltip.removeClass( 'left' );

if( pos_left + tooltip.outerWidth() > $( window ).width() )

{

pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;

tooltip.addClass( 'right' );

}

else

tooltip.removeClass( 'right' );

if( pos_top < 0 )

{

var pos_top = target.offset().top + target.outerHeight();

tooltip.addClass( 'top' );

}

else

tooltip.removeClass( 'top' );

tooltip.css( { left: pos_left, top: pos_top } )

.animate( { top: '+=10', opacity: 1 }, 50 );

};

init_tooltip();

$( window ).resize( init_tooltip );

var remove_tooltip = function()

{

tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()

{

$( this ).remove();

});

target.attr( 'title', tip );

};

target.bind( 'mouseleave', remove_tooltip );

tooltip.bind( 'click', remove_tooltip );

});

});

</script>

<abbr title="Ich bin ein Tooltip" rel="tooltip">Text Tooltip1</abbr>

<abbr title="<b>TOOLTIP</b> <em>für Zeta Producer</em>" rel="tooltip"><a href="http://community.zeta-producer.com/" title="">Textlink mit Tooltip</a></abbr>

<abbr title="<b>TOOLTIP</b><br> <em>für Zeta Producer</em>" rel="tooltip"><a href="http://community.zeta-producer.com/"><img src="http://www.smiliesuche.de/smileys/computer-schlagende/computer-schlagende-smilies-0004.gif" alt="Mein Bild" /></a></abbr>