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 :
-> 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:
Añadimos esto:
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:
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í:
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 ^^
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; }
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}
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', html: true});
$('.tip2').tipsy({gravity: 'n', html: true});
});
</script>
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>
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>
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.