Tooltips Scripts With AJAX, JavaScript & CSS

Posted by admin | Tags javascript

Web users love informative clues. Whatever questions and misunderstandings might occur - delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips - used correctly, they can greatly improve user experience and help users to get things done. In Web such “responsive” hints can be provided by tooltips. E.g., unclear input fields in web forms are perfect examples of a situation you might be willing to use a tooltip for.

Most of solutions are JavaScript- and AJAX-based, however we’ve also managed to find some lightweight CSS-based solutions. To install and use the script, it’s often enough to include the JavaScript library in the source code and provide the hint as plain text within the “title”-attribute. Sometimes you can also insert URLs, images, tables and further elements - basically, it can be almost everything you’d ever wanted it to be.

We’d like to thank Jurgen Koller for compiling an extensive list of tooltip scripts we’ve stumbled upon during our search. It gives many useful pointers, but we’ve managed to find some more. You might be willing to use Koller’s post as a quick reference for your search.

  • Nice Titles Revised
    An improved Nice Titles Tooltip Script with Accesskeys support.

  • A lightweight prototype based JavaScript tooltip
  • Nice Titles
    A classic. The script uses a background image.

  • AJAX-enabled Help-BalloonsHelp windows in baloon-design. AJAXified version is also available.

  • jTip – A jQuery Tool Tip
    Extensive AJAX-based tooltips with numerous functions and presentation possibilities.
    Screenshot Tooltipp
  • jQuery plugin: Tooltip
    Enhances the jQuery Library.

  • qTip
    Works for all elements, not only for links in most browsers - IE 5.5+, Firefox, Safari and Opera.

  • Form field hints with CSS Tooltips
    t’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.

  • JS Tooltip
    Displays customizable tool tip message for each link element on a web page. A tool tip that can be added to the anchor element unobtrusively by adding a class value to it. This was done by having the tool tip message pull from the specific title attribute of the anchor element that the tool tip was added too.

  • BoxOver
    Flexible DHTML-Tooltipp in numerous formats. Appears (almost) immedately and fades in during loading.

  • Tipster
    Multifunctional tool tips with JavaScript.

  • 5 Tooltips by DHTMLGoodies
    First version is suppose to improve the usability of online forms:

  • The second technique uses AJAX.

  • Walter Zorns JavaScript, DHTML Tooltipps
    These tooltips can be used for different purposes; the code is well-documented and can easily be improved and modified.

  • clueTip
    This is a demo page for the new clueTip — a jQuery-based, AJAX-powered tooltip. The clueTip plug-in was inspired by Cody Lindley’s jTip script.

  • Mootools Tooltip
    Mootools Javascript example of using tooltips.

  • Sweet Titles
    JavaScript Fading Tooltips.
  • Hover Tip
    Tooltip with menu-like capabilities. The tooltip layer will remain visible while the viewer hovers over it. This allows you to place clickable links inside tooltip content.

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

  • overLIB
    This JavaScript-library can be used in a variety of ways; many positioning and appearance features are available.

  • Scriptaculous Effect.Tooltip
    The tooltip script from the script.aculo.us library.
  • Tooltip.js
    Tooltipps with AJAX. The library uses the Prototype JavaScript Framework. The demo doesn’t work any longer.

Post in IT | Comments (4) | Jan 31st 2009, 03:12

Artikel Terkait

  1. Daftar Ajax Javascript library untuk belajar Ajax atau membuat aplikasi Ajax
  2. Tab-Based Interface Techniques
  3. Setting up TinyMCE with jQuery and CakePHP 1.2
  4. CSS-Based Forms: Modern Solutions
  5. daftar url plugin jquery

4 Responses

  1. Drunk Girls Flashing Says:
    Sep 16th 2009, 19:12

    now I'll stay in touch..

  2. Incest Hentai Says:
    Sep 21st 2009, 23:29

    now I'll stay tuned..

  3. Penile Vibrators Says:
    Sep 23rd 2009, 14:51

    eh... interesting :)

  4. Jovencitas Teniendo Says:
    Sep 29th 2009, 04:28

    ehh. thank you )

Kirim Komentar Anda

captcha