Lo que vamos a aprender hoy es a añadir la tipsy como en mi foro:
http://www.sekai-manga.es/foro/ (Pasar el ratón al lado de los foros) y en la leyenda del foro.

Lo primero que vamos ha hacer es bajarnos la última versión de la tipsy:
http://plugins.jquery.com/files/tipsy-0.1.7.zip
Lo bajamos y luego lo extraemos -> Ahora accedemos a la carpeta llamada "src" -> y añadimos esto en nuestro global.css :

.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(images/tipsy.gif); }
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
  .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-north { background-position: top center; }
  .tipsy-south { background-position: bottom center; }
  .tipsy-east { background-position: right center; }
  .tipsy-west { background-position: left center; }

-> Vamos a la carpeta "images" y la imagen tipsy.gif la subimos a nuestra carpeta del foro llamada "images" también -> Vamos a la carpeta "javascripts" y el archivo "jquery.tipsy.js" lo subimos a la carpeta "jscripts de nuestro foro -> Vamos a nuestro headerinclude y después de:

<script type="text/javascript">
<!--
	var cookieDomain = "{$mybb->settings['cookiedomain']}";
	var cookiePath = "{$mybb->settings['cookiepath']}";
	var cookiePrefix = "{$mybb->settings['cookieprefix']}";
	var deleteevent_confirm = "{$lang->deleteevent_confirm}";
	var removeattach_confirm = "{$lang->removeattach_confirm}";
	var loading_text = '{$lang->ajax_loading}';
	var saving_changes = '{$lang->saving_changes}';
	var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
	var my_post_key = "{$mybb->post_code}";
	var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}

Añadimos esto:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.tipsy.js"></script>
<script type="text/javascript">
	$.noConflict();
	/* Credits: Gypaete (Karyuu) - www.sekai-manga.es */
	jQuery(function($)
	{
		$('.tip').tipsy({gravity: 'w', html: true});
		$('.tip2').tipsy({gravity: 'n', html: true});
	});
</script>

y con eso tutorial completo, naah xDD
he puesto en la tip la gravedad west y en la tip2 la gravedad norte.

Ahora os explicaré el funcionamiento de la tispsy, es muuuuuuy fácil. Ahora lo veremos con un enlace:

<a href="index.php">Índice</a>

Eso se llamaría "enlace normal" xDD, ahora añadiremos la tipsy, le he puesto el "." para que lo utilicéis varias veces, pero si ponéis "#" tan sólo se verá una vez. Lo primero que añadiremos será class"tip" o tip2 depende y siempre primero el class y luego el title. Ahora añadiremos title="Nuestro título a mostrar", quedando así:

<a href="index.php" class="tip" title="¡Que bien esto se verá al pasar el ratón sobre este enlace :D!">Índice</a>

Y tipsy agregada!! También se puede añadir a div a td, etc, etc.

Licencia (CC BY-NC-ND 3.0)


Este tutorial se encuentra bajo una licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported.

Autor de esta guía: Gypaete (Karyuu) de SekaiManga.
Si deseas publicarlo en otros sitios tendrás que publicar la licencia y la autoría.

Esto de la licencia está wapo xD

Edito: Este tutorial lo hice para @robertoiui ^^

Mi idolo! buenisimo tuto

Gracias, espero que lo sepas hacer xD

Ya habia un tuto parecido pero este parece ser mas profesional xD. Haz un tuto de la lightbox

El que hizo Ariel? Ese es diferente...

La Lightbox es una mierda, es mucho mejor la Fancybox.

exprésate bien porfa ^^ me gusta el estilo es rápido sencillo y genial pero lo usaria para otras cosas x3 personalmente me gusta pero en mi theme no creo que se vea bien x3

Genial, da un Efecto muy bueno :3
Gracias y Funcionando =D