A partir de este ejemplo comentado, vamos a hacer un tooltip.
paso 1: recoger las fuentes
http://mbideasproject.googlecode.com/files/jquery.mbTooltip.1.6.zip
NOTA: En las fuentes que se descargan, verificar que está la libreria jquery.1.2.3, si no está, hay que ponerla, cogiendo el código de qualquiera de los ejemplos anteriores.
Una vez recogidas, se descomprime el archivo.
Paso 2: crear un html con el ejemplo siguiente: (clic aqui para recoger código)
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>mbTooltip</title>
</head>
<!–<script type=»text/javascript» src=»../commons/jquery-1.3.1.js»></script>–>
<script type=»text/javascript» src=»inc/jquery-1.3.2.js»></script>
<script type=»text/javascript» src=»inc/jquery.timers.js»></script>
<script type=»text/javascript» src=»inc/jquery.dropshadow.js»></script>
<script type=»text/javascript» src=»inc/mbTooltip.js»></script>
<link rel=»stylesheet» type=»text/css» href=»css/mbTooltip.css» title=»style1″ media=»screen»>
<script>
$(function(){
$(«[title]»).mbTooltip({ // also $([domElement]).mbTooltip >> in this case only children element are involved
opacity : .97, //opacity
wait:300, //before show
cssClass:»default», // default = default
timePerWord:70, //time to show in milliseconds per word
hasArrow:true, // if you whant a little arrow on the corner
hasShadow:true,
imgPath:»images/»,
ancor:»mouse», //»parent» you can ancor the tooltip to the mouse position or at the bottom of the element
shadowColor:»black», //the color of the shadow
mb_fade:200 //the time to fade-in
});
});
</script>
<body>
<span style=» background:lightgray;padding:5px; -moz-border-radius:5px» id=»pippo» title=»Esto és el texto que aparece en el tooltip» >prueba de tooltip en un span</span>
<p> </p>
<div style=» background:lightgray;padding:5px; -moz-border-radius:5px; width:300px» title=»Esto és la explicación que aparece en el tooltip»>prueba de tooltip en un (div)</div>
</body>
</html>
3.- comprobacion:
Una vez creado el archivo html con el código de ejemplo, se coloca en la misma carpeta de fuentes en la que hay la demo para comprobar que funciona.
4.- Como funciona ?
Si miramos el código html, se puede ver que el tooltip, recoge lo que hay en la propiedad title de cada objeto.
5.- Intentar añadir otro botón, capa, etc.. para ver que esto funciona
ericcurswebs.wordpress.com 
Deja un comentario