Hola! :B
Hoy os traigo este tutorial para poner la Tipsy con gravedad automática, vamos que la dirección de la flecha y posición del texto cambia según donde estés
Ejemplo:
Imagen entera:
![[Imagen: 64310464.png]](http://img204.imageshack.us/img204/1604/64310464.png)
Imagen cortada o con poco espacio:
![[Imagen: 98049872.png]](http://img62.imageshack.us/img62/8441/98049872.png)
Sé que había un tutorial de la Tiptip, pero a mi me gusta mucho más este además de que este no pide ninguna imagen, puro css :3
Bueno es fácil, aun que me costó un poco sacar la parte para que funcione en todas las imágenes y links ^_^"
PASO 1 Tener listo los archivos .js
En primer lugar no bajamos este archivo:
[attachment=1206]
Después lo descomprimimos y subimos el archivo .js que trae dentro a la carpeta jscripts en la raíz de tu Foro.
PASO 2 Agregar el CSS
Después agregamos el CSS, que se puede hacer de DOS maneras
OPCIÓN A
Nos bajamos este archivo:
[attachment=1205]
Después lo subimos a la raíz de nuestro Foro, vamos a las Plantillas de nuestro theme, en Plantillas sin Grupo, vamos a HeaderInclude y buscamos esto:
Debajo agregamos esto:Hoy os traigo este tutorial para poner la Tipsy con gravedad automática, vamos que la dirección de la flecha y posición del texto cambia según donde estés
Ejemplo:
Imagen entera:
Imagen cortada o con poco espacio:
Sé que había un tutorial de la Tiptip, pero a mi me gusta mucho más este además de que este no pide ninguna imagen, puro css :3
Bueno es fácil, aun que me costó un poco sacar la parte para que funcione en todas las imágenes y links ^_^"
PASO 1 Tener listo los archivos .js
En primer lugar no bajamos este archivo:
[attachment=1206]
Después lo descomprimimos y subimos el archivo .js que trae dentro a la carpeta jscripts en la raíz de tu Foro.
PASO 2 Agregar el CSS
Después agregamos el CSS, que se puede hacer de DOS maneras
OPCIÓN A
Nos bajamos este archivo:
[attachment=1205]
Después lo subimos a la raíz de nuestro Foro, vamos a las Plantillas de nuestro theme, en Plantillas sin Grupo, vamos a HeaderInclude y buscamos esto:
Código PHP:
<?php
{$stylesheets}
Código PHP:
<?php
<link type="text/css" rel="stylesheet" href="{$mybb->settings['bburl']}/tipsy.css" />
OPCIÓN B
Agregamos esto al css de nuestro Foro, ya sea en el Global.css o en una nueva hoja de estilo
Código:
.tipsy {
font-size: 10px;
position: absolute;
padding: 5px;
z-index: 100000;
}
.tipsy-inner {
background-color: #000;
color: #FFF;
max-width: 200px;
padding: 5px 8px 4px 8px;
text-align: center;
}
.tipsy-inner {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.tipsy-arrow {
position: absolute;
width: 0;
height: 0;
line-height: 0;
border: 5px dashed #000;
}
.tipsy-arrow-n {
border-bottom-color: #000;
}
.tipsy-arrow-s {
border-top-color: #000;
}
.tipsy-arrow-e {
border-left-color: #000;
}
.tipsy-arrow-w {
border-right-color: #000;
}
.tipsy-n .tipsy-arrow {
top: 0px;
left: 50%;
margin-left: -5px;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;
}
.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;
}
.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;
}
.tipsy-s .tipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top-style: solid;
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
}
.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
border-top-style: solid;
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
}
.tipsy-se .tipsy-arrow {
bottom: 0;
right: 10px;
border-top-style: solid;
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
}
.tipsy-e .tipsy-arrow {
right: 0;
top: 50%;
margin-top: -5px;
border-left-style: solid;
border-right: none;
border-top-color: transparent;
border-bottom-color: transparent;
}
.tipsy-w .tipsy-arrow {
left: 0;
top: 50%;
margin-top: -5px;
border-right-style: solid;
border-left: none;
border-top-color: transparent;
border-bottom-color: transparent;
}PASO 3 "Activar" la Tipsy
Ahora viene la parte clave, una vez agregado el CSS y subido el JS(PASO 1 y PASO 2) vas a nuestra plantilla headerinclude en "Plantillas sin Grupo" en las Plantillas de nuestro theme
Buscamos:
Código:
{$stylesheets}Código:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/tipsy.js"></script>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function() {
jQuery("a").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("img").tipsy({gravity: jQuery.fn.tipsy.autoNS});
});
</script>Tutorial creado por Jaizu
Lista de Demos con Tipsy al estilo FaceBook creadas con este Tutorial
Otaku-Sensei
AVISO: Necesitais jQuery
Si no funciona haced esto
http://www.soportemybb.com/tema_consulta...3#pid25473
gracias por el aporte!