• Publicidad
  • Contacto
Pixelco Tech News
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
Sin resultados
Ver todos los resultados

TinyTips – Plugin jQuery para tooltips

Diego CambiasoporDiego Cambiaso
20/08/2010
enDesarrollo/programación, Diseño, Internet, Recursos
Tiempo de lectura2 minutos
TinyTips - Plugin jQuery para ToolTips
Share on FacebookShare on Twitter

TinyTips - Plugin jQuery para ToolTipsEstaba buscando como implementar un tooltips que fuera muy fácil y liviano; el sitio DigitalInfeno encontré como hacerlo con jQuery.

TinyTips es un liviano plugin jQuery para crear tooltips, esos cuadro tipo burbujas que en este caso, cuando posamos el puntero el mouse sobre un enlace, muestra un texto y/o una imagen.

Implementar un tooltips con TinyTips

Todo el código necesario para implwmentar tooltips es el siguiente:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>tinyTips 1.0</title>
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/yourStyleSheet.css" />
<!-- ***enlace a jQuery y TinyTIps*** -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.tinyTips.js"></script>
<!--- ***código Javascript que implmenta la funcionalidad *** -->
<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('title');
});
</script>
</head>
<body>
<div id="global_wrapper">
<!-- ***código HTML del tooltip*** -->
<h1>Testing tinyTips</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="#" title="This tooltip is using the title of this anchor tag.">Aenean ut nunc metus</a>, gravida tincidunt libero.
Proin molestie risus at odio luctus condimentum. Sed molestie bibendum orci a faucibus. Vivamus vel lorem ut augue laoreet cursus.
Maecenas vestibulum nibh non nibh viverra posuere. Sed <a href="#" title="This one is also using the title.">tristique eleifend</a> elit sit amet varius.</p>
</div>
</body>
</html>

Es simplemente enlazar los archivos Javascript en la sección HEAD del HTML de la página, agregar el código Javascript y agregar la clase Title en los enlaces que queremos mostrar el tooltips. Se trata de anchor <a> y dentro de la clase title, va el contenido a mostrar dentro del tooltips.

Contenidorelaciondo

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022

Samsung e IBM lanzan el reto “Call for Code”para homenajear a los héroes de la vida

09/11/2021

TinyTips

Sitio/demo/descargar: www.digitalinferno.net/blog/jquery-plugin-tinytips-1-0

Tags: ajax tooltipscss tooltipshtml tooltipsJavascriptjavascript tooltipsjQueryjquery ajax tooltipsjquery html tooljquery ui tooltipstipsjquery image tooltipsjquery pluginjquery tipsjquery tooltipsjquery tooltips pluginjquery uiRecursosSoftware libretooltipstooltips jquerytutorial jquery
Diego Cambiaso

Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

Contenido Relacionado

Noticias

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022
Recursos

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022
Transformación Digital

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022
Cargar más

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Sin resultados
Ver todos los resultados
  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...