Tutoriales en la Web

<link rel="stylesheet" href="css/estilo.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
 
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
 
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		}
		tip.css({  top: mousey, left: mousex });
	});
});
</script>

body {
	margin: 0; padding: 0;
	font: normal 12px Verdana, Geneva, sans-serif;
	line-height: 1.8em;
	color: #333;
}
* {outline: none;}
img {border: none;}
h1 {
	font: 4em normal Georgia, 'Times New Roman', Times, serif;
	padding: 10px 0;
	color: #aaa;
	text-align: center;
}
h1 span { color: #666; }
h1 small{
	font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 0.65em;
	display: block;
	color: #666;
}
h1 a {text-decoration: none;}
a {color: #d60000; text-decoration: none;}
 
/*--Tooltip Styles--*/
.tip {
	color: #fff;
	background:#1d1d1d;
	display:none; /*--Hides by default--*/
	padding:10px;
	position:absolute;	z-index:1000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}
 
.style1 {
	color: #000000;
	font-weight: bold;
}

<div class="container">
	<h1><span>Tooltips</span>  con CSS & jQuery <small><a href="http://www.tutorialesenlaweb.com">Tutoriles en la web</a></small></h1>
    <a href="http://www.designbombs.com/design-firm/struck-axiom/" target="_blank" class="tip_trigger" style="float: left; margin: 5px 20px 20px 0pt; padding: 10px; border: 1px dashed rgb(221, 221, 221);">
    <img src="imagenes/foto3.jpg" alt="">
        <span style="display: none; top: 209px; left: 276px;" class="tip"><img src="imagenes/foto4.jpg" alt=""></span>    </a>
 
    <p>El cineasta Christopher Nolan desveló hoy el  título de su tercera entrega de Batman, "<a class="tip_trigger" href="http://www.tutorialesenlaweb.com">The Dark Knight Rises<span class="tip" style="width: 375px; display: none; top: 229px; left: 487px;"><img src="imagenes/foto5.jpg" style="float: left; margin-right: 20px;" alt=""></span></a>",  película que llegará a los cines en 2012.</p>
 
    <p>JNolan, que resucitó para el cine el personaje del hombre  murciélago con "<a class="tip_trigger" href="http://www.tutorialesenlaweb.com">Batman Begins<span class="tip" style="width: 450px; display: none; top: 286px; left: 147px;"><img src="imagenes/foto2.jpg" style="float: left; margin-right: 20px;" alt="">
La película no es considerada ni una secuela ni una precuela de las anteriores películas de los años 90 sobre el mismo personaje, realizadas por Tim Burton y Joel Schumacher. En su lugar se plantea un comienzo desde cero y se intenta reflejar el personaje original del cómic con mayor fidelidad.
 </span></a>" (2005) y arrasó en taquilla con  "<a class="tip_trigger" href="http://www.tutorialesenlaweb.com">The Dark Knight<span class="tip" style="width: 450px; display: none; top: 286px; left: 147px;"><img src="imagenes/foto1.jpg" style="float: left; margin-right: 20px;" alt="">
Se trata de una secuela de la película de 2005 Batman Begins, dirigida también por Nolan, que reinaugura los derechos de Warner sobre Batman, tratando de lograr una versión más realista y que difiere de la primera por tener una mayor apego a situaciones cotidianas que envuelven al público en la trama.
</span></a>" (2008), retomará la historia con Christian Bale,  que repite como Batman, para dar forma a una trilogía más humana que sobrenatural  sobre ese personaje de cómic.</p>
    <p> </p>
    <p align="center" class="style1">Coloque el Mouse sobre las imagenes y los textos en rojo para ver el efecto.</p>
  <p> </p>	
 
</div>