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:
CSS (agregue un div extra con la clase arrow-after para poder crear efectos de bordeado)
Ejemplo de como lo utilizo en mi foro:
Tutorial de como implementarlo:
www.mybb-es.com/hilo-tutorial-uso-de-la-tipsy (un poco viejo pero no todavía sirve)
Configuración:
Código:
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 elementoCSS (agregue un div extra con la clase arrow-after para poder crear efectos de bordeado)
Código:
.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; }Ejemplo de como lo utilizo en mi foro:
Código:
<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>Tutorial de como implementarlo:
www.mybb-es.com/hilo-tutorial-uso-de-la-tipsy (un poco viejo pero no todavía sirve)
Última modificación: 4 Jul, 2015, 7:39 pm por Destro.
