Tooltips, dimana saat pengguna memfokuskan mouse-pointer (atau klik) action ini akan memberikan informasi lebih lanjut secara otomatis di bagian tertentu, seperti kata kunci ata informasi elemen web. Anda mungkin sering menggunakan dasar tooltip hanya dengan menggunakan TITLE = ” “, ALT = ” ” atau bahkan tag HTML. Namun untuk menampilkan tooltips, saya sebagai pembaca akan bisa lebih menyenangkan, menarik dan interaktif apabila kita ingin sedikit kreatif supaya web yang kita buat kelihatan lebih professional dengan menggunakan Javascripts, CSS, HTML dan Ajax.

Berikut ini lebih dari 50 tooltips Script yang bisa gunakan untuk situs web Anda, yang disusun dalam kategori CSS, Javascripts, Javascript Frameworks, dan beberapa tutorial untuk membangun tooltips secara mendasar serta plugin untuk blog atau CMS Anda. Setelah anda mengunjungi websitenya Anda juga akan mendapatkan banyak lagi script lainnya yang menarik. Selamat Mencoba dan jangan lupa Kometntarnya ya kawan..HEHEHE

• DHTML, CSS/Javascripts

Bubble Tooltips | Demo

Walterzorn’s JavaScript, DHTML Tooltips | Demo

An easy to use cross-browser Tooltip JavaScript Library that creates tooltips, information popup boxes.

BoxOver | Demo

BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript.

Popup Balloon

Demonstration of balloon.js, written by Sheldon McKay.

SuperNote | Demo

SuperNotes are like regular footnotes turbocharged with JavaScript, so they display as tooltips in modern browsers, and remain accessible elsewhere.

qTip | Demo

dhtmlgoodies Ajax tooltips

dhtmlgoodies has couple of nice tooltips like Tooltip for forms, Ajax tooltip, Tooltip with transparent shadow, etc.

Tipster v3.1 | Demo

Highly customisable Javascript tooltip.

Nice Title (revised) | Demo

Modified version. Check out original Nice Title tooltip here.

Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo

JavaScript Fading Tooltips

Improved tooltip effect, lighter codes with titles get cut of at maximum of 25 characters.

Slider DataPager with Dynamic Tooltips | Demo

Not only users are shown the typical paging statistics, but now they can get an idea of what data can be found on the page before actually navigating to it.

apycom Popup Tooltip | Demo

Multi-layer tooltip.

DHTML Tooltips

The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display.

Good-Looking Tooltips (GLT)

GLT is short for Good-Looking Tooltips and it is a small JavaScript library that you can include to spice up the look of your tooltips in your web page.

Cool DHTML Tooltip II | Demo

Also check out Cool DHTML Tooltip I.

Form field hints with CSS/Javascript | Demo

As you tab through each input field, some helper text appears in box out to the right.

• CSS

Lixlpixel CSS tooltips

CSS Tooltips

Unobtrusive and Slightly Accessible CSS Tool Tips

Pure CSS Tooltips

CSS Tooltips – Floating HTML Elements

This article shows how to create these tooltips with only CSS.

CSS Bubble Tooltips

CSS Rollovers for tooltip

• jQuery

jQuery Tooltip | Demo

clueTip | Demo

The clueTip plug-in allows you to easily set a link to show a “tooltip” of sorts when the user’s mouse hovers over the link. If the link includes a title attribute, its text becomes the heading of the clueTip. Here’s another cover up on clueTip.

Coda Popup Bubbles | Demo

One of the slickest tooltip we’ve seen so far.

jTip | Demo

Better Tip

BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.

jHelperTip 1.0 | Demo

jHelperTip is intended to be useful in many situations such as hovering tip and clickable tips. It can get data from a container, through Ajax or even the attributes of the current object.

jQuery InputHintBox

• MooTools

Moo Tools Tips | Demo

e-magine Tooltips | Demo

Works like the original Moo Tool tooltip, with the possibility to grab contents from a DOM node.

• Prototype

HelpBalloon.js | Demo

Simple help balloon tooltip with a close button.

Protip 2

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. Also check out Protip.

• Script.aculo.us

Tooltip.js

Tooltip.js is a simple library that builds on top of Prototype and Script.aculo.us.

CoolTip | Demo

Lightweight unobtrusive JavaScript web-browser tooltips replacement technique.

• Yahoo! User Interface (YUI)

Sweet Titles | Demo

This is a YUI style of Sweet Titles which has more flexibility in customization and allows for {n} number of initialized sets.

• Web Services

Websnapr Preview Bubble | demo

The websnapr Preview Bubble is a simple, unobtrusive script used to display an overlay bubble showing a hyperlink target thumbnail using websnapr. It’s a snap to setup and works on (almost) all modern browsers.

Snap shot

Put Snap Shots on your site to upgrade your user experience

Taggify

Taggify is a web widget which allows bloggers and publishers enhance their sites by adding visual tags to any site’s images.

• Tutorials and Other Resources

If embedding a ready-made tooltip is not your cup of tea, here’s some tutorials that teach you to build tooltip from scratch.

Create a Nice, Lightweight JavaScript Tooltip [Javascript] | Demo

Create a lightweight script that fades a tooltip with rounded corners in relation to the cursor position.

Customize Your Tips [Moo Tools]

Create a Simple, Powerful Product Highlighter with MooTools [Moo Tools] | Demo

Create Multiline Tooltip [CSS/Javascript]

This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.

Bubble Tooltips [WordPress Plugin]

This plugin makes easy to use nice tooltips for your blog. You can change for two toolips.

Tippy WordPress Plugin [WordPress Plugin]
Tippy is a friendly little WordPress plugin that gives you a way to include highly configurable tooltips in your WordPress site.

JavaScript, being so simple to learn & use is one programming language which is not always given its proper due. I think the main reason for this is that most people who tries to undermine the language are greatly fooled by it’s simplicity. Although, it has its fare share of shortcomings but the kind of things it can accomplish is pretty amazing.  If you have any doubts, check Can Your Programming Language Do This? at Joel on Software.

There are raging and never ending debates as to whether JavaScript is even a true programming language or whether it is an object-oriented language at all but that’s beside the point.

IMHO, JavaScript does indeed exhibit object-oriented programming language features. As per Yahoo! Answers, there are two models of object orientation. One is based on classes as the templates from which to create objects (instances of classes), and the other relies on prototypes that are already objects and which can be cloned to create new instances. JavaScript (and others) takes the prototype approach.

In any case, today I am here to guide you towards few sources which should go a long way in giving you a good idea about what JavaScript is and what it isn’t. Statutory warning – most of them are of advanced nature . So, here you go, look at these sources which might quench your thirst for advance level JavaScript:

JavaScript Execution Context, Closure, Eval and “this” Keyword

Javascript Closures

The Magic Eval

Quirksmode JavaScript Tutorials

Scope in JavaScript

Variable Scope for New Programmers

Code Conventions for the JavaScript Programming Language

The JavaScript Programming Language

Douglas Crockford: JavaScript Doesn’t Suck

JavaScript as a Functional Language

Functional JavaScript – Harnessing the power of the Function Object

Yahoo! User Interface Blog has these excellent resources:

Douglas Crockford, a senior JavaScript Architect at Yahoo! and introducer of JavaScript Object Notation (JSON) to the world, whose  JavaScript: The World’s Most Misunderstood Programming Language is a must read, had a go at clearing the common JavaScript misgivings for you folks out there:

YUI Theater: Douglas Crockford, The JavaScript Programming Language

Video: Douglas Crockford, “An Inconvenient API: The Theory of the Dom”

Video: Douglas Crockford, “Advanced JavaScript”

Learning JavaScript Programming Language through Video Lectures

El equipo de desarrollo de yahoo acaba de lanzar la versión 2.4.0 de la ya conocida YUI – librería de interfaz de usuario, con nuevas utilidades, como por ejemplo la utilidad Selector (para obtener los elementos DOM segun selectores como los que se utilizan en CSS), la utilidad Charts (para hacer gráficos), YUI Calendar Control (para tener calendarios según requerimientos, aqui se puede personalizar de muchas formas) y ahora también soporta JSON.

Utilidad Selector

Utilidad Charts

YUI Button Control:

YUI Calendar Control:

Vía:
http://yuiblog.com/blog/2007/12/04/yuii-240/

Descarga:
http://developer.yahoo.com/yui/download/

Página Oficial de la YUI:
http://developer.yahoo.com/yui/

Caridy Patiño Mayea acaba de publicar una librería que trabaja en base a la de YUI(Yahoo! User Interface), es muy interesante, en algunos blogs la mencionan como: “Seriamente un patrón de diseño interesante”; es un conjunto de plugins, behaviors y widgets para construir aplicaciones web usando la técnica del Bubble-up. También incluye varios complementos para ampliar la biblioteca YUI para administrar areas dinámicas.

Esta realizando un trabajo formidable, pero la mejor forma de verlo es probar los ejemplos que estan en el enlace más abajo, también podrías descargarlo y/o probarlo en tus aplicaciones. De momento la documentación esta en inglés pero nos promete tenerla en castellano, asi mismo pide ayuda para traducir.

Nos muestra como utilizar una máscara de loading/cargando mientras que se carga todo el contenido de nuestra página:

• Simple Loading Mask
• Animated Loading Mask
• Loading Mask: advanced example

Ademas nos muestra ejemplos de como hacer un menu con efecto acordeon

• Unobtrusive accordion menu example (action on click)
• Accordion that slides on rollover
• Auto-opening accordion menu

Visto en: http://yuiblog.com/blog/2007/11/07/bubbling-update/
Página Oficial: http://www.bubbling-library.com/
Ejemplos: http://www.bubbling-library.com/eng/examples
Descargar: http://sourceforge.net/projects/bubbling

El grupo de desarrolladores web de yahoo! encargados del YUI(Yahoo! User Interface) han lanzado la nueva versión de esta libreria que ya va por la 2.3.0, tiene puntos muy resaltables como comentan en su post original:

1.- Rich Text Editor (beta)
2.- Base CSS
3.- YUILoader Utility (beta)
4.- ImageLoader Utility (experimental)
5.- Color Picker Control (beta)
6.- YUI Test Utility (beta)

entre ellas yo destaco un editor de texto enriquecido, probarlo: http://developer.yahoo.com/yui/examples/editor/index.html

Para descargar el yui: http://developer.yahoo.com/yui/download/