Show Posts

Tutoriales y Tips SMF / Tooltips al estilo Facebook

« on: April 13, 2011 - 01:30 13:30 »

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: [Select]

	// 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:

Code: [Select]

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

Buscar:

Code: [Select]

// Here comes the JavaScript bits!
	echo '

Añadir después:

Code: [Select]

<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.

Messages

Messages - RAULVK

Soporte General SMF / EDITADO

Tutoriales y Tips SMF / Tooltips al estilo Facebook