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:
// 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" />';
Añadir después:
// Tipsy jQuery Plugin style
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/tipsy.css" />';
Buscar:
// Here comes the JavaScript bits!
echo '
Añadir después:
<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>
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 <header></header> 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".
Espero que os guste, es mi primera aportación, que menos después de todo lo que nos ofrecéis.