muy facil pero tbn necesitas aplicar un poco de javascrpit y tbn css
te mando un codigo en los rtres espero los comprendas
primero el html
<!DOCTYPE html>
<html lang='es'>
<head>
<title>Toyota vs Nissan</title>
<meta charset='utf-8'>
<link href='estilos/base.css' rel='stylesheet'>
<script src='js/jquery.tools.min.js'></script>
<script src ='js/dialogos.js'></script>
</head>
<body>
<div>
<p>
<img id='motor' src='imagenes/toyota.jpg' alt='toyota motors' title='motores'>
<img id='auto' src='imagenes/nissan.jpg' alt='nissan' title='autos'>
</p>
</div>
</body>
</html>
ahora el css
body, div, p, img {margin:0; padding:0;}
div {
width:600px;
margin:200px auto;
}
.tooltip{
background-image:url('../imagenes/cuadro.jpg');
background-repeat:no-repeat;
height:100px;
width:200px;
margin-top:-100px;
margin-left:-180px;
padding:26px;
padding-left:40px;
font-size:25px;
color:#FFFFFF;
font-family:sans-serif;
}
y por ultimo el java
$(function(){
$('#motor[title]').tooltip({
position:'center right'
});
});
$(function(){
$('#auto[title]').tooltip({
position:'center right'
});
});
bueno tiene
s que hacerlos en archivos aparte ok espero te sirva de guia