jQuery Tools es una librería UI, que reune una colección de las más comunes interfases para usuario usadas en los desarrollos de los sitios Web actuales.

jQuery Tools como su nombre lo indica utiliza la librería jQuery como núcleo central de su funcionamiento, jQuery Tools se centra fundamentalmente en cuatro aspectos que son:

• Las partes esenciales que debe llevar una aplicación Web 2.0, haciendo énfasis principalmente en su diferenciación de las aplicaciones de escritorio.
• El tamaño y desempeño, ya que la librería pesa tan solo 5.8 KB hace énfasis en la Red de Entrega de Contenidos “Content Delivery Network (CDN)”.
• Facilidad de uso ya que no requieres de ser un programador para usar esta librería, y sacarle gran provecho.
• La posibilidad de ampliación, ya que se puede modificar el funcionamiento de la librería para lograr otros comportamientos más a medida. Separa el CSS del código lo que lo hace bastante fácil de aplicar sin conocimientos avanzados.

La librería es constantemente soportada por lo que se actualiza con frecuencia, además cuenta con gran número de Demos de su uso lo que muestra su potencial, así como tiene una muy buena documentación.

Desde el área de descarga puedes bajar herramientas por separado o todo el conjunto similar a jQueryUI, cuenta con herramientas para el trabajo con Tabs, Tooltips, Expose, Overlay, Scroll, FlashEmbed y jQuery toosl y Flowplayer.

Un uso muy común es el de los Tooltips en formularios.

Incluir estas lineas al comienzo del HTML

<!-- jquery library from googleapis -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<!-- jquery tools. remember to enable gzipping. makes it faster -->
<script src="http://myserver.org/js-gzipped/jquery.tools.min.js"></script>

HTML

<form id="myform"> 

    <h3>Registration Form</h3> 

    <!-- username -->
    <label for="username">Username</label>
    <input id="username" />
    <div class="tooltip">Must be at least 8 characters.</div><br/> 

    <!-- password -->
    <label for="password">Password</label>
    <input id="password" type="password" />
    <div class="tooltip">Try to make it hard to guess.</div><br /> 

    <!-- email -->
    <label for="username">Email</label>
    <input id="email" />
    <div class="tooltip">We won't send you any marketing material.</div><br /> 

</form>

CSS

/* simple css-based tooltip */
div.tooltip {
    background-color:#000;
    outline:1px solid #669;
    border:2px solid #fff;
    padding:10px 15px;
    width:200px;
    display:none;
    color:#fff;
    text-align:left;
    font-size:12px; 

    /* outline radius for mozilla/firefox only */
    outline-radius:4px;
    -moz-outline-radius:4px;
    -webkit-outline-radius:4px;
}

JavaScript

// setup tooltip for each trashcan image
$("div.tooltip").tooltip({ 

    // place tooltip on the right edge
    position: ['center', 'right'], 

    // a little tweaking of the position
    offset: [-2, 10], 

    // use a simple show/hide effect
    effect: 'toggle', 

    // custom opacity setting
    opacity: 0.7
});

Enlace: jQuery Tools