[Tutorial] ToolTip elegante con efecto fade

**112** · 24 September 2014, 06:38

ToolTip elegante con efecto fade

Bueno, no sé si un tutorial como este ya esté posteado en el foro o no, he utilizado el buscador y no he encontrado coincidencias, y he hecho una búsqueda manual también en tutoriales y tampoco encontré, así que espero no estar haciendo un repost, de cualquier manera, este será un script diferente.

En sí esto debería aplicarse como un tutorial para una web HTML cualquiera, ya que no solo se limita a funcionar en MyBB, pero bueno, es válido para 1.8.x y 1.6.x

Les dejaré un source que encontré en internet, los créditos al autor están contenidos en el script entre comentarios.

Descargaremos el siguiente archivo llamado tooltip.js y lo subiremos a nuestra carpeta jscripts del root principal de nuestro foro MyBB.

.js

tooltip.js (Tamaño: 9.56 KB / Descargas: 24) - 24 September 2014, 06:22

Ahora vamos a nuestro ACP >> Estilos y Plantillas >> Plantillas >> (Selecciona tu Theme) >> Plantillas sin grupo >> headerinclude
y agregamos el llamado al script que acabamos de subir a nuestro FTP, con el siguiente código:

Código: ( Seleccionar Todo )

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

Seguidamente debajo agregamos el código que lo hará funcionar en nuestros foros, aquí definimos para qué tipo de etiquetas el atributo title generará el efecto mostrado por el script.

Código: ( Seleccionar Todo )

<script type="text/javascript">

$(function() {

$("a").tipsy({gravity: $.fn.tipsy.autoNS, fade: true});

$("title").tipsy({gravity: $.fn.tipsy.autoNS, fade: true});

$("img").tipsy({gravity: $.fn.tipsy.autoNS, fade: true});

$("i").tipsy({gravity: $.fn.tipsy.autoNS, fade: true});

$("span").tipsy({gravity: $.fn.tipsy.autoNS, fade: true});

$("div").tipsy({gravity: $.fn.tipsy.autoNS, fade: true});

});

</script>

Como pueden ver, funcionará para las etiquetas a, img, i, span y div que son las más usadas en un documento HTML o estructura de página web.

Ahora finalmente agregaremos el código CSS para que sea visite esto y no tener problemas de desfase al pasar el cursor del mouse sobre algún elemento que ya lo esté empleando:

Vamos a nuestro ACP >> Estilos y Plantillas >> (Selecciona tu Theme) >> global.css >> Editar hoja de estilo: modo avanzado y al final de todo el código mostrado agregamos esto:

Código: ( Seleccionar Todo )

/* TOOLTIP STYLES */



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

.tipsy-inner{background-color:#000;color:#FFF;max-width:200px;padding:5px 8px 4px;text-align:center}

/* Rounded corners */

.tipsy-inner{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}

/* Uncomment for shadow */

/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:5px dashed #000}

/* Rules to colour arrows */

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

El código está compreso ya que no habrá necesidad de editarlo, a menos que quieras otra apariencia del tooltip, pero será fácil hacerlo con los comentarios entre el código que especifican qué denota cada grupo de estilos.

Finalmente guardamos y recargamos la caché en nuestro foro y ya debemos notar el elegante tooltip con efecto fade en nuestro foro.

Vista Previa:

[Imagen: 1LypUH7.png]

Ahora, quizás la transparencia sea algo que deseen editar de forma rápida, pues muchas veces, mucha transparencia hace que no se vea tan bien, después de todo los colores oscuros son elegante, como el negro sólido que yo recomiendo, para esto simplemente vamos a script el archivo adjunto tooltip.js para editarlo:

Buscamos

Código: ( Seleccionar Todo )

$.fn.tipsy.defaults = {

Que está en la línea 187 de referencia y veremos el siguiente bloque de código:

Código: ( Seleccionar Todo )

   $.fn.tipsy.defaults = {

        className: null,

        delayIn: 0,

        delayOut: 0,

        fade: false,

        fallback: '',

        gravity: 'n',

        html: false,

        live: false,

        offset: 0,

        opacity: 0.8,

        title: 'title',

        trigger: 'hover'

    };

Como verán se puede editar muchas cosas, obviamente si saben hacerlo, para este tutorial no me extenderé tanto en detalles que no son necesarios, solo en la parte de opacidad. Esto no puede ser más fácil, si queremos cambiar la opacidad del globo del tooltip modificamos el código en la parte de opacity

Un ejemplo claro sería cambiar la opacidad de 0.8 a 0.95 o quizás a 1 como lo hacemos en CSS. En este caso usaré 1 y quedaría así el código:

Código: ( Seleccionar Todo )

   $.fn.tipsy.defaults = {

        className: null,

        delayIn: 0,

        delayOut: 0,

        fade: false,

        fallback: '',

        gravity: 'n',

        html: false,

        live: false,

        offset: 0,

        opacity: 1,

        title: 'title',

        trigger: 'hover'

    };

Notar el cambio de opacity: 0.8, a opacity: 1,

Con lo cual al volver a subir el archivo a mismo directorio de nuestro FTP, la apariencia será así:

[Imagen: AmMgn7Y.png]

Entonces es notable el cambio en la opacidad, esto también funciona para MyBB 1.6, de hecho es casi lo mismo, solo hay que llamar correctamente al archivo con la variable antigua de URL de foro en la plantilla headerinclude, el resto es lo mismo, y claro, no olvidarse que para MyBB 1.6.x hay que cargar antes jQuery.

Espero les sea útil, saludos.

**180** · 24 September 2014, 19:03

0

Nunca me puse a buscar, sólo lo hice 1 ves y creí que la opacidad se definía desde el css.

Muy buen tutorial y detalle ^^.

**272** · 24 September 2014, 21:25

2

Hice un pequeño, de hecho es mi primera contribución de un PHP a MyBB en forma de plugin, archivo que te crea una hoja de estilos y te añade eso al headerinclude. Aunque sólo funciona en MyBB 1.8. ^^

Como no soy muy bueno en esto, sólo conseguí que se pusiera y, al darle clic a "Instalar y activar", haga la magia. Así que pueden borrar el inc/plugins/mytooltip.php sin problema, una vez que hayas clicado en Instalar y activar, claro. xd

.zip

MyToolTip.zip (Tamaño: 4.79 KB / Descargas: 7) - 24 September 2014, 21:25

**112** · 24 September 2014, 22:17

0

@ eNvy hay scripts interesantes en google, yo suelo usar este desde hace muchos meses atrás, el control de opacidad como otras propiedad son mucho más cómodas así.

Sobre el plugin, si de eso se tratara, creo que podrías hacer un plugin por cada tutorial de añadir un archivo .js al headerinclude u otra plantilla Gran sonrisa

me parece innecesario ya que es algo muy sencillo de agregar, aunque para aquellos que nunca han usado antes mybb les será útil, pues con unos clicks lo tendrán ya listo, igual gracias por la adaptación Sonrisa

**2,958** · 24 September 2014, 23:02

0

Gracias por el manual lo voy a implementar en el foro y al archivo que dejo @ Joseahfer lo voy a pulir para compartirlo y que tenga algunas funcionalidades extra si me es posible.

Voy a agregarle el colorpicker y este para ponerlo algo lindo.

**112** · 25 September 2014, 02:39

0

@Dark Neo tal vez sería bueno que se pudieran gestionar las opciones de características del tooltip del archivo tooltip.js desde el ACP como opciones de configuración del plugin, claro que sería tedioso modificar el archivo a cada rato, creo que sería conveniente agregar el script en el archivo del plugin aunque resultaría extenso pero se pueden hacer adaptaciones y comprimirlo sería útil para no tener tanto código revuelto.

De otro modo no me imagino qué más se podría hacer con un plugin que integre esta función a MyBB, saludos Sonrisa

**2,958** · 25 September 2014, 03:31

0

Esa es la idea que tenia en mente ya lo hice con un plugin antea asi que es cosa de trastear y listo quedara algo bueno al final. Para evitar que los usuarios destrocen sus plantillas en busca de aplicarlo en sua foros :D

Posibles temas similares…
Tema		Autor	Respuestas	Vistas	Último mensaje
	[Tutorial] Agregar efecto blur para invitados en posts.	Whiteneo	3	501	5 March 2020, 23:42 Último mensaje: Javier
	[Tutorial] Nombres de usuarios con efecto brillante o con efecto de arcoiris	Herbert	2	1,244	20 February 2018, 20:34 Último mensaje: Herbert
	[Tutorial] Descripción de Categorías con efecto	eNvy	6	2,484	9 February 2018, 03:26 Último mensaje: HearTz
	[Tutorial] Youtube elegante	calamar	5	1,475	24 September 2014, 00:02 Último mensaje: calamar