Tooltip Responsive


Text Tooltip1
Mein Bild

Links
Zentriert
Rechts

Um das Responsive Verhalten zu testen das Browserfenster auf die Breite der Inhaltsbereiches verkleinern. Und die Maus über den Text "Links" und "Rechts" führen


CSS-Code anzeigen

<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>

dieses Script am ende der Seite per Widget Quelltext einfügen

<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>

Quelltext "einfacher Text"

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

Quelltext "Textlink"

<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>

Quelltext "Bild mit Link"

<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>


test

Lorem ipsum dolor sit Tooltip 1 consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Tooltip2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

CSS-Code einbinden

Quellcode einbinden

support
Dutch English French German