SummArg | Cursos y recursos para webmasters

22/06/2011

Completa librería de Tooltips: Tipped

Tipped es una herramienta para añadir tooltips a tu proyecto que utiliza HTML5 y las librerías jQuery y Prototipe. Tiene una gran flexibilidad a la hora de adaptar el diseño y los contenidos de estas cajas de información, podemos observar la variedad de demos en la sección demostrations.

Para implementar Tipped en nuestro proyecto elegimos una de las librerías mencionadas y la incluimos entre etiquetas <head>, en este caso utilizaremos jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Insertamos los archivos de Tipped, también entre etiquetas <head>:

<script type="text/javascript" src="/js/bridge/bridge.js"></script>
<script type="text/javascript" src="/js/excanvas/excanvas.js"></script>
<script type="text/javascript" src="/js/spinners/spinners.js"></script>
<script type="text/javascript" src="/js/tipped/tipped.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tipped.css" />

Con esto ya estamos listos para insertar nuestro tooltip en cualquier parte:

<span title="un tooltip">Esto activa un tooltip!</span>

O bien podemos insertar un tooltip con una configuración mas específica:

<span title="Tooltip" data-tipped-options="
  skin: 'light',
  hook: 'rightmiddle',
  hideOn: false,
  closeButton: true,
  hideDelay: .2,
  offset: { x: 10 }
">Yo también activo un tooltip!</span>

Descarga y Demo | Visto en Xyberneticos

Dejar un comentario