Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* Tooltips al estilo Facebook
  Leído 4016 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: RAULVK
Abr 13 2011
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:
Código: [Seleccionar]
// 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:
Código: [Seleccionar]
    // Tipsy jQuery Plugin style
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/tipsy.css" />';



Buscar:
Código: [Seleccionar]
// Here comes the JavaScript bits!
echo '

Añadir después:
Código: [Seleccionar]
<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 <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".


« Última Modificación: Abril 14, 2011, 12:40:32 pm por RAULVK »



muy buenooo Raul tu aporte. lo voy a probar




Gran Aporte compañero!!

Gracias  ;)




exelente aporte ;)

quedara exelente mi web con este aporte es justo lo que le faltaba




nice tip




no es <header> sino <head>.

 y otra cosa, si yo quiero en ese cuadradito añadir una imagen? no conoces el metodo?




No entiendo mucho de javascript, pero me imagino que será con el trigger, en la página del script explica la función.




Yo creo que si, porque dice que con esta opcion se puede usar html en la descripcion.
$('#example-html').tipsy({html: true });

por lo que seguramente se puede usar el img




Beuna idea y tuto  ;)




La pagina de descarga no esta disponible  :'( .
Un sañudo!




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,