[Tutorial] Uso de la Tipsy

Gypaete 5 Aug, 2011, 1:40 am

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:
<?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:
<?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', 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:

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)

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.

[Tutorial] Uso de la Tipsy

Gypaete 5 Aug, 2011, 1:40 am

robertoiui 5 Aug, 2011, 6:54 am

Gypaete 5 Aug, 2011, 6:55 am

ZioGuE 14 Aug, 2011, 12:02 pm

Gypaete 16 Aug, 2011, 1:27 pm

waylayer 15 Sep, 2011, 8:03 pm

Jaizu 16 Sep, 2011, 5:51 am