JQuery and CSS3 Tooltip
JQuery and CSS3 Tooltip
Step 1: Insert the following code in the <HEAD> section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$( document ).ready( function()
{
var targets = $( '[rel~=tooltip]' ),
target = false,
tooltip = false,
title = false;
targets.bind( 'mouseenter', function()
{
target = $( this );
tip = target.attr( 'title' );
tooltip = $( '' );
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 ); }); }); ( function( doc ) { var addEvent = 'addEventListener', type = 'gesturestart', qsa = 'querySelectorAll', scales = [ 1, 1 ], meta = qsa in doc ? doc[ qsa ]( 'meta[name=viewport]' ) : []; function fix() { meta.content = 'width=device-width,minimum-scale=' + scales[ 0 ] + ',maximum-scale=' + scales[ 1 ]; doc.removeEventListener( type, fix, true ); } if( ( meta = meta[ meta.length - 1 ] ) && addEvent in doc ) { fix(); scales = [ .25, 1.6 ]; doc[ addEvent ]( type, fix, true ); } }( document ) ); </script>
Step 1: Insert the following code in the <HEAD> section of your page
<style type="text/css">
body
{
font: normal 100%/1 'Noticia Text', 'Lucida Bright', Georgia, serif;
color: #111;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
#container
{
width: 220px;
height: 61px;
position: absolute;
top: 361px;
left: 741px;
margin: -150px 0 0 -200px;
}
a
{
color: #F00;
text-decoration: none;
font-weight:bold;
font-size:24px;
}
a:hover
{
color: #000;
font-weight:bold;
text-decoration:underline;
font-size:24px;
}
#info
{
text-decoration: none;
}
#tooltip
{
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align: center;
text-shadow: 0 1px rgba( 0, 0, 0, .5 );
line-height: 1.5;
color: #fff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bc80ea), color-stop(1, #dfbdfa) );
background:-moz-linear-gradient( center top, #bc80ea 5%, #dfbdfa 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc80ea', endColorstr='#dfbdfa');
background-color:#bc80ea;
-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-color: #333;
border-top: 10px solid rgba( 0, 0, 0, .7 );
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}
#tooltip.top:after
{
border-top-color: transparent;
border-bottom-color: #333;
border-bottom: 10px solid 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>
Step 2: Insert the below sample code into the <BODY> section of your page:
<div id="container">
<p>
<a href="#" title="Elegant CSS and jQuery Tooltip: Responsive, Mobile-Friendly" rel="tooltip" style="white-space: nowrap;">Mouseover Here</a></p>
</div>
stunning page!
ReplyDelete