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]
Imagen cortada o con poco espacio:
[Imagen: 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:

{$stylesheets}

PHP

Select All

Debajo agregamos esto:

<link type="text/css" rel="stylesheet" href="{$mybb->settings['bburl']}/tipsy.css" />

PHP

Select All

OPCIÓN B
Agregamos esto al css de nuestro Foro, ya sea en el Global.css o en una nueva hoja de estilo

.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;
}

None

Select All

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:

{$stylesheets}

None

Select All

Y antes agregamos:

<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> 

None

Select All

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

esta lindo pero solo es para los ALT y no para los TITLE

Creo que es mejor así, así usas los TITLE como método de SEO

Este me va a servir, combina con uno que tengo para la descripción en los subforos.

Se ve lindo tal ves lo utilice gracias por el aporte

No bad lo probare cuando este en la PC gracias por el aporte!

reputacion lo usare gracias por el tuto

en pc funsiona muy bien pero para los que anden en el cel usando opera mini no podran navegar ya que solo puedes ver el index y si intentas entrar a una categoria o tema solo vuelve a cargar el index

la verdad no me sirvio lo probe pero no me sale nada-.-

AVISO: Necesitais jQuery
Si no funciona agregad esto

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

PHP

Select All