Simple Machines Community Forum

SMF Support => Español (Spanish) => Language Specific Support => Tutoriales => Topic started by: #jsDotx3 on July 12, 2016, 09:18:14 PM

Title: Agregando tooltip de Facebook
Post by: #jsDotx3 on July 12, 2016, 09:18:14 PM
Agregando tooltip de Facebook

Tooltip es una buena herramiente donde podemos visualizar el titulo de una imagen, de un texto o de un link que tengamos en nuestro sitio web. Actualmente, hemos conocido el famoso "Tooltip estilo facebook", donde esa vez nos hacía descargar imagen, archivos js y css. Muchas veces nos complicamos, está vez haremos algo demasiado sencillo, agregando archivos ya existente en el CDN de Cloudflare.

El archivo que vamos a trabajar es index.template.php de tu themes.

Buscar por:
Code: [Select]
// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

Abajo agregar:
Code: [Select]
//Agregando tooltip JS
echo' <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.min.css" />';

Buscar por:
Code: [Select]
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
Antes agregar:
Code: [Select]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("[title]").tipsy({fade: true, gravity: $.fn.tipsy.autoNS});
  });
</script>

Resultado:
(http://www.jqueryscript.net/images/Facebook-like-jQuery-Tootip-Plugin-tipsy.jpg)

Saludos, #!jsDotx3.
Title: Re: Agregando tooltip de Facebook
Post by: Príncipe_Azul on July 13, 2016, 08:30:51 AM
Hola, gracias por el aporte!! :)

Saludos!! :)
Title: Re: Agregando tooltip de Facebook
Post by: Rock Lee on July 13, 2016, 10:05:47 AM
Parece interesante ya voy a probarlo en un smf demo tengo para ver que tal :D gracias por compartir!


Saludos!
Title: Re: Agregando tooltip de Facebook
Post by: d3vcho(); on July 13, 2016, 02:58:43 PM
Tiene muy buena pinta. Lo probaré a ver qué tal. ¡Muchas gracias!