Importante:

¿Como pedir soporte? (Marzo 18, 2015)

[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 :
.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)

[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.
Archivos Adjuntos

0 0
Tema anterior Tema siguiente
Mi idolo! buenisimo tuto
0
Gracias, espero que lo sepas hacer xD
0
Ya habia un tuto parecido pero este parece ser mas profesional xD. Haz un tuto de la lightbox Big Grin
0
El que hizo Ariel? Ese es diferente...

La Lightbox es una mierda, es mucho mejor la Fancybox.
0
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
0
Genial, da un Efecto muy bueno :3
Gracias y Funcionando =D
0

Colaboradores: ZioGuE , waylayer , robertoiui , Jaizu , Gypaete
This forum uses Lukasz Tkacz MyBB addons.