Tooltips al estilo Facebook

SMF Support > Modificaciones (Mods)

(1/7) > >>

RAULVK:
Tooltips al estilo Facebook

Con esta modificación conseguiremos tener nuestros tooltips similares a los de Facebook. Para que todos lo entendáis, me refiero al texto que aparece cuando pasas el ratón por encima de imágen que tenga el atributo "title=".

Os explicare paso a paso como hacerlo, es muy sencillo.

1. - Pagina de descarga: http://plugins.jquery.com/node/2947/release (Descargar la última versión)
- Pagina del script: http://onehackoranother.com/projects/jquery/tipsy/
- Demo en vivo en foro SMF: http://www.bajaunapeli.com/

2. - Cuando os hayáis descargado el script, lo descomprimís y os quedaréis con los 3 archivos importantes:

jquery.tipsy.js: Lo guardamos en la carpeta scripts de nuestro theme.
tipsy.css: Lo guardamos en la carpeta css de nuestro theme.
tipsy.gif: Lo guardamos en la carpeta images de nuestro theme.

3. - Cojemos el index.template.php de nuestro theme para trabajar con el.

Buscar:

--- Code: --- // RTL languages require an additional stylesheet.
if ($context['right_to_left'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';
--- End code ---

Añadir después:

--- Code: --- // Tipsy jQuery Plugin style
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/tipsy.css" />';
--- End code ---

Buscar:

--- Code: ---// Here comes the JavaScript bits!
echo '
--- End code ---

Añadir después:

--- Code: ---<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.tipsy.js"></script>
<script type="text/javascript">
$(function() {
$("[title]").tipsy({fade: true, gravity: $.fn.tipsy.autoNS});
});
</script>
--- End code ---

He personalizado la última parte del script para que se muestre automáticamente en todos los "title=", para que el tooltip se coloque automáticamente en la posición correcta y sea siempre visible, y además le añadirá un bonito efecto fade.
Si queréis que actúe de otro modo, podéis entrar en su pagina (os la deje al principio del tuto) y leyendo la información que encontraréis dentro.

ATENCIÓN: Comprobar entre el <head></head> del index.template.php que no tenéis las librerías de JQuery, hay algunos themes y mods que la utilizan, por lo que a lo mejor ya la tenéis. Si veis que tenéis alguna mas, quitarla y dejar solo la del tutorial por que si no tendréis conflictos. Puede haber dos tipos, la normal que es "jquery.js" y la minimizada que es "jquery.min.js".

~BeneKiD:
Muy interesante compañero!
Probaré a ponerlo en mi web! ;) un saludo

EDIT: Lastima, lo intente implementar en mi portal y no funciono! :S
http://www.territoriodd.com

un saludo

RAULVK:
Echale un vistazo a la nota que coloque abajo del tuto, puede que sea eso. A varias personas les a sucedido.

4Kstore:
Yo ya habia implementado algo asi en mi pagina, le da un toque muy sobrio.
Gracias por el aporte!

gohanjaja:
no me salió , y tengo 2.0 rc4, hice tal cual el tutorial... :-\

Navigation

[0] Message Index

[#] Next page

Go to full version