Jquery Labs » Tooltips

jQuery Drop Captions Plugin

admin — Fri, 09 Apr 2010 11:00:34 +0000

In a nutshell, drop captions takes an image’s title attribute and converts it into a caption that appears only when the mouse is moved over the image. This allows me to maintain a clean look to the site, while enabling the functionality of captions. It’s also totally degradable if the user has JavaScript disabled; the title attribute will still display the exact same text.

Demostration
Demo Page

Download
Download Source Code

Tags: Caption, Captions, catchmyfame, Code, Display, Drop, Html, image, JavaScript, Mouse, Plugins, source, Text, Tooltips, User

jQuery Tooltip (jQuery Tools)

admin — Sun, 21 Mar 2010 12:33:53 +0000

Tooltip done right

Tooltips are one of the most important JavaScript widgets on the web. With this plugin you can easily implement tooltips on your site to guide your users.

Demostration
Demo Page

Documentation
Documentation Page

Download
Download Source Code

Tags: Code, Html, JavaScript, jQuery, jQuery Tools, Player, Plugins, source, Tips, Tools, Tooltip, Tooltips, UI, User, Widget, Widgets

Signin Dropdown Box Likes Twitter

admin — Wed, 24 Feb 2010 14:46:29 +0000

Perfect signin dropdown box likes Twitter with jQuery

Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery. It’s really easy, it’ll help you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. This entry will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tooltips. Enjoy it!

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: .net, aext, Box, Button, Code, Design, Drop, Dropdown, Follow, Form, How To, jQuery, Learning, Like, Load, Login, Share, Show, Sign, source, Step, Style, Table, Tips, Tipsy, Toggle, Tooltip, Tooltips, Tutorials, Twitter

Simple tooltips (Smart Tooltips)

admin — Mon, 22 Feb 2010 09:47:09 +0000

Create simple tooltips with CSS and jQuery – Part 2: Smart Tooltips

These tooltips will act a little bit smarter than our basic version. The script will skip links with empty or missing title tags, but more important: the tooltips will try to stay in the browser viewport.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
tooltip.js

Tags: Browser, Content, Css, Data, Follow, Html, jQuery, Kriesi, Link, Load, Step, Tag, Tips, Tooltip, Tooltips, Tutorials

jQuery Horizontal Tooltips Menu

admin — Wed, 17 Feb 2010 09:42:08 +0000

jQuery Horizontal Tooltips Menu Tutorials

A horizontal menu with tooltip that slides accross the menu panel. It’s a bit similar to lava lamp, but in this script, it displays the caption of the icon menu.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
jquery-tooltipmenu.zip

Tags: Caption, Display, Follow, Horizontal, Horizontal Menu, Html, icon, jQuery, Load, Menu, Panel, Post, queness, Slide, source, Tips, Tooltip, Tooltips, Tutorials

Coda Bubble jQuery Plugin

admin — Mon, 01 Feb 2010 12:51:20 +0000

Plugin based on the great tutorial at http://jqueryfordesigners.com/coda-popup-bubbles/

Demostration
Demo Page

Download
coda_bubble.zip

Tags: Bubble, Coda, Design, Follow, jQuery, Load, Myjquery, Php, Plugins, Sign, Tooltips, Tutorials

MopTip Plugin

admin — Fri, 25 Dec 2009 20:59:13 +0000

jMaxInput: jQuery Twitter-Like Textarea

En : MopBox is draggable show box that can contain div, image , flashmovie, video, etc. If it has more than one children, slider navigation is shown automatically. From ver 2.2, It get to be resizaable,(this option is usable for 1page content)

Jp : MopTipは、DIV、画像、などが表示できるチップ表示ボックスです。画面上のポジションにより、自動的に形状が変化します。マウスオーバーで表示、マウスアウトで閉じる’overOut’、マウスオーバーで表示、クローズボタンクリックで閉じる’overClick’の2種類があります。

Example
Demos Page

Download
mopTip.zip

Tags: Auto, Box, Content, Div, Drag, Draggable, Flash, Html, image, Input, jQuery, Like, Load, MopStudio, Navigation, Php, Plugins, Show, Slide, Slider, Text, Textarea, Tips, Tooltips, Twitter, Video

Tipsy Tooltip Plugin

admin — Mon, 21 Dec 2009 06:47:25 +0000

tipsy – Facebook-style tooltip plugin for jQuery

Tipsy is a jQuery for creating a Facebook-like tooltips effect based on an anchor tags title attribute.

Example
Demo Page

Download
Download (jquery.com)

Tags: Effect, Facebook, jQuery, Like, Load, Plugins, Style, Tag, Tips, Tipsy, Tooltip, Tooltips

qTip iQuery Plugin

admin — Mon, 23 Nov 2009 06:59:06 +0000

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework.

Example
Demos Index

Download
Demos Page

Tags: JavaScript, jQuery, Load, Plugins, Tips, Tooltip, Tooltips

Simpletip jQuery Plugin

admin — Mon, 23 Nov 2009 06:43:43 +0000

Simple tooltips jQuery Plugin

Simpletip is a plugin for the popular jQuery JavaScript library. It allows you to create tooltips with ease on any element on the page using the power of jQuery’s selectors and event management. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

Example
Viwe Some Demos

Download
source code – with comments
minified with Douglas Crockford’s minifier
packed with Dean Edward’s packer

Tags: Ajax, Code, Comment, Effect, Effects, File, Follow, Google, JavaScript, jQuery, library, Load, Plugins, source, Tips, Tooltip, Tooltips, Visual

Making an Interactive Picture

admin — Sat, 21 Nov 2009 11:45:46 +0000

In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect of a photo (ie items or people).

The original inspiration for this tutorial came from the IKEA website, which uses Flash to accomplish something similar, although admittedly with a few extra features.

Tutorial
Making an Interactive Picture with jQuery

Example
Live Demo

Download
Download Zip File

Tags: Box, buildinternet, File, Flash, How To, Html, image, jQuery, Load, Navigation, Picture, Show, Tips, Tooltip, Tooltips, Tutorials, UI

jQuery Tools

admin — Thu, 19 Nov 2009 16:50:41 +0000

jQuery Tools is a collection of the most important user-interface components for today’s websites. This single JavaScript file weighs only 5.72 Kb

Demo
Demos Page

Documentation
User’s Guide

Download
Grab your own set of jQuery Tools: (5 of 21 selected)

Tags: Combinations, Effect, Expose, File, Flashembed, Html, Interface, JavaScript, jQuery, jQuery Tools, Overlay, Player, Scrollable, Slideshow, Tabs, Tools, Tooltips, UI, User

Jquery Labs » Tooltips

jQuery Drop Captions Plugin

Related posts

jQuery Tooltip (jQuery Tools)

Tooltip done right

Related posts

Signin Dropdown Box Likes Twitter

Perfect signin dropdown box likes Twitter with jQuery

Related posts

Simple tooltips (Smart Tooltips)

Create simple tooltips with CSS and jQuery – Part 2: Smart Tooltips

Related posts

jQuery Horizontal Tooltips Menu

jQuery Horizontal Tooltips Menu Tutorials

Related posts

Coda Bubble jQuery Plugin

Related posts

MopTip Plugin

jMaxInput: jQuery Twitter-Like Textarea

Related posts

Tipsy Tooltip Plugin

tipsy – Facebook-style tooltip plugin for jQuery

Related posts

qTip iQuery Plugin

Related posts

Simpletip jQuery Plugin

Simple tooltips jQuery Plugin

Related posts

Making an Interactive Picture

Related posts

jQuery Tools

Related posts