Estaba agregando Tipsy a mi foro pero lo sentía medio molesto al no salir en donde tenia el puntero del mouse, asique se me dio por modificarlo un poco y agregarles un par de opciones extras para personalizar mejor la posición.


Configuración:

gravity: (1 o 2 letras)
 - n = abajo
 - s = arriba
 - w = derecha
 - e = izquierda
 - a = automatico

bymouse: bool
 - true = la posición X es relativa al puntero del mouse

offsetX: int
 - cantidad de px que se le suma la la posición X

offsetY: int
 - cantidad de px que se le suma la la posición Y

inside: bool
- true = la posición X sumando el offsetX nunca saldrá de los limites del elemento

None

Select All

CSS (agregue un div extra con la clase arrow-after para poder crear efectos de bordeado)

.tipsy {
	font-size: 12px;
	position: absolute;
	padding: 5px;
	z-index: 100000;
}

.tipsy-inner {
	background-color: #111;
	color: #FFF;
	max-width: 320px;
	padding: 6px 9px 7px 9px;
	text-align: center;
	border: 1px solid #444;
	border-radius: 6px;
	box-shadow: 0 0 5px #000;
}

.tipsy-arrow-after,
.tipsy-arrow {
	position: absolute;
	width: 0;
	height: 0;
	line-height: 0;
	border: 5px solid #444;
}

.tipsy-arrow-after {
  border-color: #111;
}

.tipsy-n .tipsy-arrow, .tipsy-n .tipsy-arrow-after { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-n .tipsy-arrow-after { top: 1px; }

.tipsy-nw .tipsy-arrow, .tipsy-nw .tipsy-arrow-after  { top: -5px; left: 5px; border-bottom-style: solid; border-top-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow-after { top: -3px; left: 6px; }
.tipsy-nw .tipsy-inner { border-top-left-radius: 0px; }

.tipsy-ne .tipsy-arrow, .tipsy-ne .tipsy-arrow-after  { top: -5px; right: 5px; border-bottom-style: solid; border-top-color: transparent;  border-left-color: transparent; }
.tipsy-ne .tipsy-arrow-after { top: -3px; right: 6px;}
.tipsy-ne .tipsy-inner { border-top-right-radius: 0px; }

.tipsy-s .tipsy-arrow, .tipsy-s .tipsy-arrow-after  { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-s .tipsy-arrow-after { bottom: 1px; }

.tipsy-sw .tipsy-arrow, .tipsy-sw .tipsy-arrow-after  { bottom: -5px; left: 5px; border-top-style: solid; border-bottom-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow-after { bottom: -3px; left: 6px;}
.tipsy-sw .tipsy-inner { border-bottom-left-radius: 0px; }

.tipsy-se .tipsy-arrow, .tipsy-se .tipsy-arrow-after  { bottom: -5px; right: 5px; border-top-style: solid; border-bottom-color: transparent; border-left-color: transparent; }
.tipsy-se .tipsy-arrow-after { bottom: -3px; right: 6px;}
.tipsy-se .tipsy-inner { border-bottom-right-radius: 0px; }

.tipsy-e .tipsy-arrow, .tipsy-e .tipsy-arrow-after  { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-e .tipsy-arrow-after { right: 1px; }

.tipsy-w .tipsy-arrow, .tipsy-w .tipsy-arrow-after { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow-after { left: 1px; }

None

Select All

Ejemplo de como lo utilizo en mi foro:

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.tipsy.js"></script>

<script type='text/javascript'> 
$(function() {

// los botones de los post
$(".post_controls a[title]").tipsy({gravity: "a", delayIn: 300, offsetX: 0, offsetY: 10 });

// todos los demas links
$("a[title]").tipsy({gravity: "aa", inside: true, bymouse: true, delayIn: 300, offsetX: 15, offsetY: 5 });

// en algunos textos con <span> tengo titulos xd
$("span[title]").tipsy({gravity: "a", delayIn: 300 });

// de la vista previa en los titulos del tema
$("td[id=prev][title]").tipsy({gravity: "w", inside: true, bymouse: true, html: true, delayIn: 300, offsetX: 50 }); 
});
</script>

None

Select All

Tutorial de como implementarlo:
www.mybb-es.com/hilo-tutorial-uso-de-la-tipsy (un poco viejo pero no todavía sirve)

Probando en mi test forum a ver que tal

probando en local tambien , gracias.
jugare con el diseno css.