Tooltips al estilo Facebook

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.

muy bueno, gracias por el aporte

Muy buen aporte!!!



Si lo creastes fue muy buen trabajo si usastes el tutorial de alguien deja el credito eso no te quita el aportazo!!

Saludos
Maliante

Muy buen aporte!! +1
Salu2!!

Buen aporte :bien: :bien:

tio te me adelantaste, esta sugerencia la hiba a dar hace dias en creacion de mods pero se me olvido (tengo memoria de elefante)

+1 excelente!!

Ready necesitas como yo usar el notepad como tu memoria jajajajaja

Saludos
Maliante

Bastante bonito el efecto eh! un aplauso

Muy bueno! +1 por compartirlo

no encuentro el code

Code: [Select]

// Here comes the JavaScript bits!
   echo '

Que ago?

no encuentro el code

Code: [Select]

// Here comes the JavaScript bits!
   echo '

Que ago?  <-- Es hago de Hacer (mantengamos el idioma)

Si no aparece en tu theme es que el creador removio los comentarios. Simplemente busca el index.template.php del default y busca q queda antes y despues y localiza eso en tu theme.

Realmente los mods son para el theme default q es el q todos tenemos los demas son cambios q no tienen soporte. Asi q aprende a aplicarlo ya q lo usaras mucho.

Saludos
Maliante

Ya encontré todo por que cambie de tema y tal pero no me tira el efecto "/ puse bien todos los códigos.

Que ago?

Adjunto aqui mi index.template.php aver si es que me pueden ayudar

Show content

http://www.mediafire.com/?3gjaz54ax4fi3c8

No me funciona el TIP