News

Tooltips Scripts: 50+ Scripts With AJAX, Javascripts, CSS & Tutorials

18 nov/08

tooltip scripts and resources

Tooltip, together with a user mouse-pointing (or clicking) action provides more information about a particular section, keyword, paragraph or any web element. Tooltips are fundamentally build-in into HTML. You can achieve basic tooltip just by using TITLE="", ALT="" or even the <ACRONYM> HTML tag. However displaying tooltips for our readers can be more fun, interesting and interactive by taking advantage of Javascripts, CSS, Ajax with HTML.

Here’s more than 50 Tooltips Scripts you can implement for websites, organized in categories of CSS, Javascripts, Javascript Frameworks, couple of tutorials to build tooltips from scratch as well as plugins for blogs. Full list after jump.

DHTML, CSS/Javascripts

CSS

jQuery

  • jQuery Tooltip | Demo
  • clueTip | DemoThe 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 | DemoOne of the slickest tooltip we’ve seen so far.

  • jTip | Demo
  • Better TipBetterTip 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 | DemojHelperTip 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

Prototype

  • HelpBalloon.js | DemoSimple help balloon tooltip with a close button.

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

Script.aculo.us

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

  • CoolTip | DemoLightweight unobtrusive JavaScript web-browser tooltips replacement technique.

Yahoo! User Interface (YUI)

  • Sweet Titles | DemoThis 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 | demoThe 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 shotPut Snap Shots on your site to upgrade your user experience

  • TaggifyTaggify 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.

tooltip scripts and resources

Tooltip, together with a user mouse-pointing (or clicking) action provides more information about a particular section, keyword, paragraph or any web element. Tooltips are fundamentally build-in into HTML. You can achieve basic tooltip just by using TITLE="", ALT="" or even the <ACRONYM> HTML tag. However displaying tooltips for our readers can be more fun, interesting and interactive by taking advantage of Javascripts, CSS, Ajax with HTML.

Here’s more than 50 Tooltips Scripts you can implement for websites, organized in categories of CSS, Javascripts, Javascript Frameworks, couple of tutorials to build tooltips from scratch as well as plugins for blogs. Full list after jump.

DHTML, CSS/Javascripts

CSS

jQuery

  • jQuery Tooltip | Demo
  • clueTip | DemoThe 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 | DemoOne of the slickest tooltip we’ve seen so far.

  • jTip | Demo
  • Better TipBetterTip 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 | DemojHelperTip 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

Prototype

  • HelpBalloon.js | DemoSimple help balloon tooltip with a close button.

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

Script.aculo.us

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

  • CoolTip | DemoLightweight unobtrusive JavaScript web-browser tooltips replacement technique.

Yahoo! User Interface (YUI)

  • Sweet Titles | DemoThis 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 | demoThe 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 shotPut Snap Shots on your site to upgrade your user experience

  • TaggifyTaggify 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.


(Fonte: Hongkiat)
(Link)

Technorati Tags: , , , , , , , , , , ,

Leggi Anche

Condividi
Condividi in DeliciousCondividi in DiggCondividi in RedditCondividi in StumbleCondividi in MixxCondividi in TecnoratiCondividi in Ok Notizie

Commenti

Un commento per “Tooltips Scripts: 50+ Scripts With AJAX, Javascripts, CSS & Tutorials”

  1. Excelente lista. Gracias.

    Inserito da Janckos | febbraio 13, 2009, 19:59

Inserisci Commento

*

Autore

Archivio

Iscrizione Newsletter

    Tieniti informato con tutte le novità del mondo informatico con la nostra newsletter
    Email:

    Nome:

    Auto Shop Italia
    Web Burning Blog
    Info Privacy

Meta