Simple Machines Community Forum

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:
// 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:
//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:
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>

Antes agregar:
<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:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.jqueryscript.net%2Fimages%2FFacebook-like-jQuery-Tootip-Plugin-tipsy.jpg&hash=d36e4737bff3a6b7d50db3a3d1f00b98f031d9ac)

Saludos, #!jsDotx3.

Hola, gracias por el aporte!! :)

Saludos!! :)

Parece interesante ya voy a probarlo en un smf demo tengo para ver que tal :D gracias por compartir!


Saludos!

Tiene muy buena pinta. Lo probaré a ver qué tal. ¡Muchas gracias!