20 Tooltips Script usages With Ajax, Javascript And CSS

JyotiDevelopment1 Comment

css-tooltips

Tooltips are the coolest way to show the additional information or special reference which is often shown with mouseover or click actions, Here We’ve Collected 20 Tooltip Scripts vary from CSS, Ajax based, mootools and jQuery with cool Animation which you can easily incorporate into your future designs.

CSS Tooltips: A simple demonstration of using custom CSS tooltips as a drop-in replacement for the browser-based title attribute.

Demo

Box Over: BoxOver uses or DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or Javascript. Flexible DHTML tool tip in numerous formats. Appears immedately and fades in during loading.

Demo

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

Demo

Bubble Tooltips: Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.

Demo

Super Note: Supernotes are like regular footnotes turbocharged with javascript ,so they display as tooltips in modern browsers, and remain accessible elsewhere.

Demo

Popup Balloon: The balloon.js package is written in object-oriented JavaScript and allows you to add configurable balloon tooltips (AKA popup balloons, bubbles, rollover tooltips etc., etc.) to your website.

Demo

DHTML Goodies AJAX Tooltips: A nice tooltip where the content of the tooltip is retrieved by Ajax from external files.

Demo:

Tipster: A tipster is a highly customisable javascript tooltip and have advanced HTML formatting.

Demo

Mobile Tooltip Widget: A mod version of the tooltip widget for GWT which supports mouse movement event.

Demo

Advanced Tooltip: Add advanced tooltips for people on your photo.

Demo

Hover Tips: 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.

Demo

DHTML Tooltips: Popup a help tip or information layer onmouseover using this object-based DHTML tooltip code. The basic version, presented on this page, can contain plain text or rich html, images, or images and text. The tooltip can be displayed over a background image. It can move with mouse movement. And it is easy to customize and modify.

Demo

Tooltip.js: Tooltip.js is a simple tooltip that builds on top of prototype and script.aculo.us.

Demo

Mootools Tip: Mootools Javascript example of using tooltips.

Demo

Websnapr Preview Bubble: 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.

Demo

Cool Tooltip:Lightweight unobtrusive JavaScript web-browser tooltips replacement technique.

Demo

jQuery Plugin: 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.

Demo

Prototip2: Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framewor.

Demo

DHTML Goodies Balloon Tooltips: An alternative to the alt and title attribute. Roll your mouse over the links in the example to see how this work.

Demo

Unobstructive And Slightly Accessible CSS Tooltips: The scripts creates half-transparent tooltips with shadows.

Demo

Jyoti20 Tooltips Script usages With Ajax, Javascript And CSS

One Comment on ““20 Tooltips Script usages With Ajax, Javascript And CSS”

  1. Romeo Truner

    Hello, I came across this article while searching for help with JavaScript. I’ve recently changed browsers from Google Chrome to IE. Just recently I seem to have a problem with loading JavaScript. Every time I browse site that needs Javascript, my computer does not load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix the problem. Any help is greatly appreciated! Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *