[Tutorial] Uso de la Tipsy
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 leye...

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 :
Código:
.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:
Código PHP:
<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:
Código PHP:
<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'htmltrue});
        $(
'.tip2').tipsy({gravity'n'htmltrue});
    });
</
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:
Código:
<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í:
Código:
<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)

[Imagen: 80x15.png] 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 ^^
Última modificación: 24 Sep, 2011, 3:54 am por juan.
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 Big Grin
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 Wink 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