Minimal GUI Set: More Than 1000 Free Elements, Buttons, Patterns, Icons And Many More

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

jQuery Tooltip, 100 fresh resources!

Comments and suggestions in here

jquery-tooltip

As a Web designer you’ll always be on the lookout for the freshest resources to incorporate in your site, to keep it up to date in the latest trends in web design and make the web surfing progression a trouble-free route for your visitors, especially considering, that site users’ needs nowadays point to a site that brings them rich information with best visual presentation, and that above all grants it in a easy access fashion.

So it’s essential that during the creation of your site, you enhance it with the latest in practical access tools that serve as much information to the visitor as can be possible after just one click, without having to wait more than a several seconds after the click.

The Tooltip guarantees of a muddle-proof layout

In this sense, the Tooltip feature is probably one of the greatest tools in providing information to visitors without creating a muddle in a page design. Although it’s usually considered as just a tiny portion of no importance in your web design, it’s a tool that can’t be underestimated when it comes to achieving a minimalistic layout that doesn’t sacrifice the richness of the content of the page.

With time the Tooltip will guarantee the permanence of a visitor in your site, by allowing the user to go through sort of a discovery process, in which he or she will have to uncover each piece of information one by one, after going through an interacting dynamic with the page. Now remember, that interactivity will always be great for user experience to make the browser experience an interesting one, and with time will be equivalent for you as a web developer in numbers.

Although, the main purpose of the tooltip goes to providing visitors with extra contents in information, highlighted data, useful tips and help clues when using a site, with the use of a tooltip it doesn’t necessarily have to mean an extended wait period for the page loading, since the tooltip being very helpful in visitor usability can be displayed without having to reload the entire page.

Tooltips to enhance the minimalistic graphic identity of your web layout

In this sense, a Tooltip will also allow you to enhance the content of your site without hampering the basic web design, when the box containing the “extra information” appears and then disappears by clicking on the corresponding area, this way you’re page design can maintain a clean up to date aspect, even when containing an extended list of rich content hidden after each click.

In the following piece, we’re sharing a handy abstract of the tooltips accessible for your employment in JavaScript, CSS, and JQuery language, plenty of them with quality scripts available for immediate use that will allow you to set up tooltips without coding it from scratch. Through the article you’ll probably notice that we’ve made a special emphasis in proving you with JQuery Tooltips, this due to their easy installment and set up qualities.

We hope this summary comes to great use in your future web design projects, so don’t hold back on keeping us posted.

JQuery and JavaScript tooltips

qTip

jquery23

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tons of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!

jQuery Bubble Popup v.2.3.1

jquery07

jQuery Bubble Popup is a plugin to display smart, animated & shadowed, “bubble” popups or tooltips with few lines of code in jQuery. The plugin support HTML5 and it is fully compatible with IE, Firefox, Chrome, Opera and Safari. It needs

Tipped

jquery45

Tipped allows you to easily create beautiful tooltips using the jQuery JavaScript library. Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips.

TipTip

jquery28

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

Simpletip

jquery22

Simpletip is a fresh & lightweight jQuery plugin for creating flexible tooltips. Tooltips can be attached to any element & easily styled in means of presentation & positioning. The tooltips can be static, dynamic or loaded via Ajax. And, any combination of effects can be applied to make them more attractive. Simpletip provides various options for max. customization. The plugin is well-documented & provides examples.

JQUERY (MB)TOOLTIP 1.6

jquery29

(mb)Tooltip is a beautiful tooltip for your webpage in jQuery. Simply by placing a title attribute with your content as value, and then you can replace the ugly default tooltip with this smart and nice one. You can also disable and enable (mb)Tooltip at anytime.

UniTip

jquery36

UniTip is an easy to implement & customize cross-browser tooltip script. This tooltip script is also lightweight & accepts HTML to be displayed. UniTip uses transparent PNG’s for creating the tooltip balloon. And, for better compatibility with IE6, Unit PNG fix is already included with the package. The script does not rely on any JavaScript frameworks & can be applied to specific tags or classes.

STYLE-MY-TOOLTIPS JQUERY PLUGIN

jquery67

Small in size (3kb unmodified) script to enhance the look of tooltips. It works just like browser’s native tooltips with few options and styling via CSS. By default, the script applies to any element with a title attribute like links, paragraphs, images etc. but you can easily set it to affect only specific classes.

jQuery and CSS3 Simple Tooltip

jquery90

jQuery and CSS3 Simple Tooltip works by popping up a bubble with more information about a word when you hover over it. You can even add an image to highlight the popped up info.

Mosaic

jquery24

Mosaic jQuery Plugin automatically generates sliding boxes & captions. It allows slide & fade animations with custom directions. It preloads images within boxes. It is very lightweight at ~2kb (minified). Implementation is fairly easy, they have provided a number of sample configurations in the downloadable file. It operates with two panels — an overlay and a backdrop. The content in the overlay gets repositioned according to the options that you provide.

Prototip 1.3 (scriptaculous)

jquery33

Prototip allows you to easily create both simple and complex tooltips using the Prototype JavaScript framework. If you also use Scriptaculous you can even add some nice effects to them.

Prototip 2

jquery39

Prototip allows you to easily create both simple and complex tooltips using the Prototype JavaScript framework. Style: Easy to customize. Position: Complete control over tooltip positions. Round: Configurable rounded corners, no PNG images required. Speech bubble effect! Works on all modern browsers.

Grumble

jquery01

Originally written for Huddle.com, grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localized text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers. grumble.js is currently written as a jQuery plugin and can be found on Github

Tooltipsy

jquery02

tooltipsy is a jQuery tooltip plugin created by Brian Cray because he was frustrated with the lack of CSS control and bulky includes of the others. tooltipsy is licensed under GNU General Public License, version 2. Feel free to download, modify, and reuse the source code for any purpose as long as it remains under the same license.

Tipsy

jquery03

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute. By default, tooltips will appear centered underneath their anchor. Using the gravity parameter, it’s possible to control the positioning of the tooltip relative to the pointer

ImgPreview

jquery04

The ‘imgPreview’ plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time! The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link. The plugin is entirely unobtrusive; it does not require any hooks to target specific links (no non-semantic classes); it will automatically detect the anchors that are linking to images and will only apply the preview effect to them.

QrTip

jquery05

qrTip is a simple script allows you to add QR code popups to your links project by Konstantin Kovshenin. It’s free and easy to use! Just include a style sheet and a JavaScript file to your webpage.

Poshy Tip

jquery06

Poshy Tip is a jQuery tooltip plugin that allows creating stylish tooltips in a unique and easy way. it is uses a single background image for scalable tooltips. It detects when a background image has been set for the tooltip container DIV and creates a scalable frame from it that wraps the inner contents of the tip.

Flexible Nav

jquery08

Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article,.. any web page. Nav links are distributed proportionally to the page sections. See how your scrollbar “weds” these links :)

Joyride

jquery09

Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved.

Joyride ImageMapster

jquery10

Joyride is a plugin for jQuery that simplifies the process of guiding users to discover the features of a website.By defining the steps of the tour as an ordered list, the plugin displays desired information near any HTML element inside tooltips.

Ninja UI

jquery14

jQuery has lots of plugins and jQuery UI to improve its functionality in many ways. Ninja UI is a plugin for the framework that brings new alternatives to them in a single package. It includes widgets like buttons, accordion, icons, tooltips/modal box, slider, rating, tabs, auto-suggest and canvas-powered loader icon.

Codrops

jquery16

Codrops is sharing a very nice jQuery script that makes creating a chic site tour so easy.It works by adding classes (with a specific format) to the elements to be highlighted and configuring them to display any custom text. The script can work manually by the user clicking prev-next links or totally automated in the pre-defined order.Tooltips displaying the information can also be customized as color, position and the duration they will be active.

Wijmo

jquery17

Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo. Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.

Pines Notify

jquery19

Pines Notify is a JavaScript notification plugin, developed by Hunter Perrin as part of Pines. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. It uses the jQuery UI CSS library for styling, which means it is fully and easily themeable. Try out some of the readymade themes using the selector in the top right corner of this page. Pines Notify is distributed under the GPL, LGPL, and MPL. This triple copyleft licensing model avoids incompatibility with other open source licenses.

BeautyTips

jquery21

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called “talk bubbles” or “help balloons”) associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways.

Colortip

jquery25

Tutorialzine has written a simple jQuery tooltip plugin called Colortip. It converts the title attributes of elements within your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design. You can also easily create your own tooltip designs by just including three additional style classes to your stylesheet and adding an element to the supported colors array in colortip-1.0-jQuery.js.

ZURB JavaScript Annotation Plugin

jquery26

ZURB has released the latest application called Verify, which allows you to collect user feedback through interactive tools. A lot of these tools require the user to annotate an image so they came up with a single plugin they could use for the entire app. JavaScript Annotation Plugin makes it dead simple to add and save image annotations. Here’s how it works: The first parameter to annotatableImage is a function implemented by you and defines the element that will be added when you click. In the example below that function is called blackNote. Simple right?

TinyTips 1.1

jquery27

TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly. TinyTips is very easy to install and use. Simply include TinyTips and the latest release of jQuery in the . You can also give it a nice style by editing the stylesheet.

jQuery captify (v1.1.3)

jquery30

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these.

Coda Popup Bubbles

jquery31

Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design.

Sinosplice Tooltips

jquery41

WordPress tooltip plugins lets you add tooltips to plain text and links on your post and pages. It offers a tinyMCE shortcode GUI which will guide you through the entire process of a tooltip.

The clueTip plugin

jquery42

The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

Image map with CSS3 & jQuery tooltips

jquery46

Image map with CSS3 & jQuery tooltips

Tooltip Shortcodes

jquery48

Tooltip Shortcodes are a great way to provide popout tips

jQuery Tooltip

jquery49

The jQuery Tooltip Plugin allows you to easily create tooltips with Ajax content.

jGrowl

jquery50

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

jQuery Awesomeness

jquery51

Browsers will automatically display a tooltip when you provide a title attribute. Internet Explorer will also use the alt attribute. But, in this tutorial I’m going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.

jQuery Tools

jquery52

Simple or Rich A simple call such as $(“img[title]”).tooltip(); will enable tooltips by taking advantage of the element’s title attribute. If you want complex tooltips with images, tables, forms and links that’s possible by placing the tooltip element manually next to the trigger element.

Simple CSS + JavaScript Tooltip with jQuery

jquery53

Create a Simple CSS + JavaScript Tooltip with jQuery

jQuery Tooltip plugin

jquery54

By creating a plugin version of the code you are making it portable and easily applied to any html element in your website. The objective of the final plugin will be to be able to create a custom tooltip of our own design on any element, using the title attribute as the source for the tooltip content. Creating a jQuery plugin version makes you think a little more about the various requirements of the code to ensure that all possible variations of where/how it may be used are covered. Since you also may have less control over the CSS of where it may be used you usually need to add a little extra jQuery to set the conditions. Generally this requires adding code that gets the objects dimensions, position or content.

jQuery Tools

jquery55

jQuery Tooltips plugin is a jQuery plugins to display tooltips text. There are 6 colors available: yellow, black, white, red, blue, green. But, it’s easily customizable and you can add more colors to suit your website’s design. You can choose to display the tooltip in 3 locations, on the top of the page, the bottom of the page, or floating over the element.

EZPZ Tooltip

jquery57

The tooltip appears as you hover over the target, and follows the mouse cursor until it leaves the target.

Sticky Tooltip script

jquery58

This script adds a rich HTML tooltip to elements that’s revealed when the mouse rolls over them, in which the tooltip follows the cursor around as it moves about within the element. The tooltip can be “stickied”, or kept visible on the screen by right clicking on pressing “s” should the user wish to interact with some content within the tooltip, such as click a link inside it. The contents for each tooltip are simply defined as regular HTML on the page, making them very easy to define and customize. Throw in a subtle fade in effect, and you’ve got yourself a tooltip that can do more than just show extra information, but serve it as well!

Ajax tooltip

jquery59

This is very much based on the Coda Popup Bubble example for jQuery that’s been going around with a few important differences: The information is requested via AJAX, so you don’t have to include all of this extra information in a hidden div. This keeps your markup smaller for grids with tons of names in it. When you mouse over another name, the previous one will disappear. If you tried this with the original Coda example, you’d end up with a weird streaking animation since there’s a delay before the div is hidden. Works in IE (just turned off the fade animation) Note that this requires jQuery 1.3.1. I found out that the new .live() functionality is very useful for Ajax applications. Previously, if you bind a handler at startup, it will apply to elements that currently exist. The new live() functionality makes it to where you can apply events to elements that are created in the future. This means I can create a new link via Ajax and it will still work with the hover tooltip.

jQuery Tooltip plugin

jquery60

Presenting dyn-web’s JavaScript DHTML Tooltips with unobtrusive event handling and easy setup. The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display. The JavaScript is object based, avoids the use of global variables and provides accessibility and device independent features. See the list of online examples on the right. See the list of features below. The Documentation covers basic instructions as well as more detailed information about advanced features of the code. The download file contains basic examples facilitating implementation of the code to suit your purposes.

jQuery plugin: Tooltip

jquery61

jQuery plugin: Tooltip Current version: 1.3 Compressed filesize: 3910 bytes License: MIT/GPL

Orbital Tooltip

jquery63

With the Orbital Tooltip you can choose to position the tooltip on any object in a 360 degrees around it. With multiple options for spacing & offset as well as styling, Orbital Tooltip stands head and shoulders above other jQuery tooltips.

BetterTip

jquery64

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.

Poshy Tip

jquery68

I almost hear you asking – why another jQuery tooltip plugin? Well, I actually never planned creating this plugin until I reached the final stages of designing this website and decided to add some pretty tooltips. So I started looking for a tooltip plugin that allows easily creating stylish tooltips and also includes the most useful features for such a script. However, I wasn’t pleased with the results I found so I ended up writing a completely new plugin and am now making it available for all.

The Tooltip

jquery88

The Tooltip is a handsome, modern gentleman that appears when it’s showtime.

everyTip

jpg

EveryTip is a jQuery plugin that will read out any element’s title tag and converts it into a individual styleable dynamic tooltip. You can apply it on any element you want e.g.: img, a , li, span, div and so on. The plugin automatically detects all elements of your specified type on the whole page and adds a tooltip to it. It also supports inside HTML , so you can display all HTML tags inside a tooltip. Comes in a lightweight and crypted version.

bQuery

jquery91

The set up offers endless configurablity. User your own css and tags (as long as you don’t use the q tag anywhere) to style your tab panel. It’s easy to do, easy to set up, easy to style because Tab World does all the hard work.

Taggify widget

jquery95

This post demonstrates how you can use Taggify widget to enhance your blog with nice functionality showing popup tooltips for people on your photos. Let’s add notes for 2 well-known men on the photo below so people far from IT industry do not mix them up while reading our blog. Move mouse over the image and notes below it to see how it looks in live.

CoolTips

jquery32

CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique. CoolTips is used to replace conventional web-browser tooltips. The tooltips get contents of title attribute, so it’s fully unobtrusive. CoolTips is an OO class based on Prototype JS and script.aculo.us frameworks.

Tipmage

jquery37

Tipmage is a JavaScript class aimed at creating and managing tooltips (or “notes”) over images. Tipmage makes it possible to mark rectangular portions of an image and attach a description to each one of them. The description will be shown as a tooltip when the mouse is over the right section of the image. The class can work in two ways: in normal mode it just shows the tooltips, while in edit mode it also allows the user to edit them. Tipmage supports the use of special callback functions to perform operations related to the editing of a tooltip (for example Ajax calls to access a database). An external CSS stylesheet allows to customize the appearance of the user interface. This class has been tested working on Internet Explorer 5.5->8.0, Firefox 1.0->3.6, Chrome 5.0, Safari 2.0->5.0, Opera 7.6->10.0. and partial support for iOS 3.0->4.0 (iPhone, iPad).

Fading JavaScript Tooltips 2kb

jquery38

This animated JavaScript tooltip script is very easy to use and lightweight at only 2kb. It is tested working in IE6+, Firefox, Opera and Safari. Jacob Gube of Six Revisions has posted the script and a walk-through of the code and the logic.

Sweet Titles

jquery40

No. It’s not a knock-off from NICE Titles nor is it trying to improve on Dunstan’s revised attempt. And it most definitely isn’t ripped from one of those event-handler infested scripts from Dynamic Drive No. It’s none of those. Instead I had two goals for this script: Make the code cleaner and much more condense – with in fact – less code and Improve the tooltip effect

HTML Tooltip script

jquery62

Inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window’s edges.

Tooltip.js (scriptaculous)

jquery93

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

websnapr

jquery94

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.This script has been proved to work in IE, Firefox, Opera and Safari. It might work on other browsers as well.

balloon.js

jquery97

This page is a demonstration of balloon.js, written by Sheldon McKay. 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. It was written for scientific web applications, such as GBrowse and WormBase, but is generic and portable to most websites. The balloons are dynamically sized in both the vertical and horizontal dimensions and the left/right/up/down orientation is calculated automatically based on the position of the cursor. Balloon contents can be provided locally in your own HTML or remotely via AJAX. This package is open source and free to all as long as the copyright notice is retained. See below for demonstrations and documentation..

JavaScript DHTML Tooltips

jquery98

Presenting dyn-web’s JavaScript DHTML Tooltips with unobtrusive event handling and easy setup. The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display. The JavaScript is object based, avoids the use of global variables and provides accessibility and device independent features. See the list of online examples on the right. See the list of features below. The Documentation covers basic instructions as well as more detailed information about advanced features of the code. The download file contains basic examples facilitating implementation of the code to suit your purposes.

Rich HTML Balloon Tooltip

jquery99

This is a balloon style tooltip that can be applied to any link(s) on the page. What sets it apart is where it gets the tooltip messages- from ordinary DIV elements on the page containing the desired tooltip content. This fact means you can easily define tooltips with rich HTML and images inside them. In other words, any content can now easily become a tooltip message, whether you’re manually defining the tooltips, or dynamically generating them using server side languages. The tooltip supports an optional arrow image that like the tooltip itself, dynamically adjusts itself if it’s too close to any four corners of the browser window.

Digg-style

jquery100

I was surfing website and searching for inspirations and I stumbled upon digg.com. I discovered a small utility on every single post, the share link. Yes, I want to implement that, it looks cool, practical and useful! So, this tut, we are going to make a digg-style post sharing toolbox. It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.

Extra: CSS tooltips

Bubble Point Tooltips

jquery35

a small plugin to display tooltips, was inspired to do the Mac OSX dock. The result is a very attractive tooltips only use CSS3 and jQuery. This little plugin modifies the default behavior of the title tag of the links that usually shows when we position the mouse pointer over a link with a yellow background, quite ugly. To run this plugin only need to initialize it with a simple line of code.

CSS3 tooltips

jquery47

The HTML title attribute is the default additional info you can use. But, the default titles can’t be styled. So, if you want something cool, that you can style it as you wish, then a custom CSS3 tooltip is the solution.

CSS3 tooltips

jquery69

I had an idea I wanted to try where you would have a vertical list of names, and as you moused over them, their email addresses would slide out from underneath them. To have the HTML be as clean as possible, I thought it would be cool to use the an :after pseudo element and a -webkit-transition to make it happen. But, alas, you cannot animate or transition a pseudo element.

Sexy Tooltips with Just CSS

jquery70

Providing supplementary information about potentially complex elements of a user interface is a central part of any website designer or developer’s workflow in creating usable and accessible websites. One of the most common mechanisms for providing extra details beyond what you can see on the page is the tooltip (a design pattern for showing tips about a particular element on a screen). While many innovative solutions exist using CSS and JavaScript (with and without JavaScript frameworks like jQuery), it’s sometimes useful to look towards new technologies to examine the impact they may have on our current techniques. Thus, we’re going to look at how using the evolving CSS standard can enhance some lovely cross-browser tooltips.

Balloon Pop-Ups

jquery96

The method is based on my drop-down and flyout menus whereby Internet Explorer can be made to recognize nested links by using tables. Hover the mouse over any of the web pages to see a pop-up information box with the site name and a snippet of information. Also included are three links from the particular web site.

Freebies (useful images to design your own tooltip)

Map Pins & Tooltips (PSD)

jquery65

We’ve all seen them, they’re not exactly something which I’d label as unique in concept, but the idea is solid. Stick a pin in it, animate the tooltip, maps done.

Awesome Tooltips & Alerts

jquery71

This collection of sleek modern tool tips are great for web projects and due to neutral and pastel colors fit in with almost any design, there are 5 different tooltip and alert designs including: Basic Tooltip Location Tooltip Download Tooltip Large Tooltip Floating Alert Each design has 6 color variations, for a total of 30 unique tooltips

Attachment Pop-up

jquery72

Colorful Map Tags

jquery73

Growl Theme

jquery74

Growl Notification Style

jquery75

Album Cover and Tooltip

jquery76

Tooltip

jquery77

Calendar Tooltip

jquery78

6 Styles in Photoshop Layers to Tooltip

jquery79

6 Styles in Photoshop Layers to Tooltip | Creative Styles | by Smite Design

GMUI_SlixUI

jquery80

Slix UI controls is a set made to make Web & App designers’ lives much easier. It was mainly designed to be used in Apps, but it can just as easily be used in the web . It gives you ready to use solutions for huge part of the most stuff you need to build an interface. includes tooltip feature

Swift Navigation

jquery81

Here is something I made a while ago and never used. It is a fully organized PSD of a menu in 6 color variations, as well as 3 button and tooltip styles. Each button has 3 states, and the hover states are different depending on the type of link (e.g. contact will hover over contact information layout). Enjoy!

Button + tooltip

jquery82

Free PSD. Icon from iconsweet set.

CSS3 Tooltip

jquery83

This is the CSS code for a simple tooltip. To use it, first place the CSS code included in the Download anywhere in your CSS files. Next put a span with the class \’Tooltip\’ around whatever element you want people to hover over to display the tooltip. Finally give the span an Alt value of whatever you want to appear in the tooltip. This tooltip is supported by Firefox, Chrome, Safari, Opera and IE9. Naturally you can edit the CSS to style it however you want to.

Info Popup

jquery84

A small info popup created in Adobe Fireworks. Would be great for all kinds of UIs. Enjoy!

Profile Tooltip

jquery85

Tooltip that appears when hovering over a user/member.

Mini tooltips

jquery86

Designing a web app? Need to notify your users with style? Those mini tooltips will be perfect! Take a look. I get notified about something every ten minutes. New email, new blog posts, new IM messages, new Facebook comments, new clients’ responses. Almost every app has some kind of notification system. Those mini tooltips should be pretty useful. Also, did I mention they look great with previously released Slick UI elements?

Slick UI elements

jquery87

Hello World! Welcome to Freebies Booth – best place to get free design resources! Enjoy and spread the word! Our very first file resizable, vector UI elements for both light and dark interfaces. It contains buttons (normal + hover), slider, progress bar and tooltips. Grab it and let us know what you think in the comments!

Additional resources (tooltip related)

MooTools 1.2 Tooltip

jquery66

Tooltips can also provide another method of website branding. Why throw a vanilla tooltip to the user when you can brand your website? MooTools 1.2 provides a Tips plugin that allows for easy-to-customize tooltips. Let me show you how to create a sweet, branded tooltip.

The dijit.TooltipDialog (dojo)

jquery43

The dijit.TooltipDialog displays a tooltip that contains form elements (like a dialog). Although both Dialog and TooltipDialog are modal, TooltipDialog can be closed by clicking anywhere on the screen, whereas for Dialog you must click on the [x] mark of the Dialog. A TooltipDialog can only be opened as a drop down from another widget, usually dijit.form.DropDownButton.

The dijit.Tooltip (dojo)

jquery44

Tooltip is similar to the title= attribute in regular HTML, but is much more flexible. You can control the display timing, and specify arbitrary (rich-text) HTML for the tooltip contents.

Pop

jquery56

enjoy simple dropdown menus with pop!, an unobtrusive JavaScript plugin for jQuery.

jQuery-Notes

jquery34

jQuery-Notes is a simple and easy to use jQuery-Plugin that allows you to add notes to any image (even foreign ones) on your website or blog.

Elycharts

jquery11

Elycharts comes with many interactions like mouse tracking and events, highlight of selected areas with various animations, tooltip and hints, html anchors and many more. Also, it can modify data dynamically with good-looking animations to display the change in charts. The charts are generated with SVG/VML and the library is built on jQuery + Rapha«l.

Zebra_Form

jquery12

Zebra_Form is a PHP class that simplifies the process of creating and validating HTML forms. Its object-oriented structure promotes rapid HTML forms development and encourages developers to write clean and easily maintainable code. It frees the developers from the repetitive task of writing the code for validating forms by offering powerful built-in client-side and server-side validation. Zebra_Form has an integrated cross-site scripting prevention mechanism that automatically strips out potentially malicious code from the submitted data. It also prevents automated SPAM posts, out of the box and without relying on CAPTCHA by using honey pots. Output can be generated either automatically or manually through templates (basic PHP files). When generated automatically, the generated output validates as HTML 4.01 Strict or XHTML 1.0 Strict and has the same look & feel across all major browsers like Firefox, Chrome, Opera, Safari, Internet Explorer (yes, IE 6, too).

Awkward Showcase

jquery13

Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more. Since version 1.0 it’s integrated with our Viewline Plugin enabling new innovative ways for displaying content on your website.

JFormer

jquery15

Creating a well-functioning form, how simple or complicated it is, requires a serious effort as it has various ingredients including (cross-browser) design, validation, and usability. jFormer, a form framework built on top of jQuery brings a complete, easy-to-use and solid solution to handling them. It enables us to build forms which are validated on client-side and server-side (PHP solution is included) with Ajax requests where users are notified in a very chic way with tooltips and CSS-styling on every level. The framework has advanced features like cloning forms and/or form fields, dividing a form into pages, creating dependencies and much more. Default styles for every part of a form is already included and they can be customized/improved further quickly with CSS.

DDChart

jquery18

DDChart is a jQuery plugin for creating bar charts where it is possible to digg the data deeper and deeper.Charts are interactive, they respond to mouseovers with tooltips that include the data and they have a nice animation on load.

JqPlot

jquery20

jqPlot is a plotting and charting plugin for the jQuery JavaScript framework. jqPlot produces beautiful line, bar and pie charts with many features.


27 Responses to “jQuery Tooltip, 100 fresh resources!”

  1. Thanks for these resources saved a couple of them. Used jQuery Tools before and they are awesome.

  2. Saleem Mohammad
    December 19th

    The jQuery JqPlot is just excellent jQuery plugin it is very useful for developer and it is good news for developers .

  3. I really need one which is Backwards compatible with IE6 and IE7, which is the best one to use?

  4. Awesome collection of tooltips, but you missed one: http://www.websanova.com/plugins/websanova/tooltip

  5. facebook tips
    February 1st

    THANKS,
    I LIKE THIS BLOG ARTICLE.

  6. This is just one AWESOME list of tooltips! WOW! Lots of these tools are really “outside of the box”! I woulda liked to see WalkMe http://www.walkme.com in there too – they’re new and the balloons are real nice and seamlessly integrated into the UI.

  7. […] post: jQuery Tooltip, 100 fresh resources! – WebDesignShock Bookmark on Delicious Digg this post Recommend on Facebook share via Reddit Share with Stumblers […]

  8. […] the rest here: jQuery Tooltip, 100 fresh resources … – Web Design Shock Tags: form, freebie, freebies-and, function-load, jquery, Photoshop, put-content, related-posts, […]

  9. jQuery Tooltip, 100 fresh resources! http://t.co/K62QkEb7 via @webdesignshock

  10. jQuery Tooltip, 100 fresh resources! http://t.co/Y94jcOUs via @webdesignshock

  11. #jQuery Tooltip, 100 fresh resources! http://t.co/wYPlEg2u via @webdesignshock #webdesign

  12. Awesome round up post from @WebDesignShock 100 resources for Jquery Tooltip http://t.co/S8pXe4BP via @webdesignshock

  13. jQuery Tooltip, 100 fresh resources! http://t.co/Y1oFjJ5V via @webdesignshock #usernews

  14. jQuery Tooltip, 100 fresh resources! http://t.co/qy520PpZ via @webdesignshock

  15. 100 jquery tooltips – http://t.co/NqhATHXP @web2feed #webdesign @JVR71

  16. jQuery Tooltip, 100 fresh resources! http://t.co/tovkQgfW via @webdesignshock

  17. jQuery Tooltip, 100 fresh resources! http://t.co/aMy4oOZw via @webdesignshock

  18. RT @WebDesignShock: jQuery Tooltip, 100 fresh resources! http://t.co/zHdNI0o4 #design #useful

  19. RT @WebDesignShock: jQuery Tooltip, 100 fresh resources! http://t.co/zHdNI0o4 #design #useful

Leave a Reply

Comments

*