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.
We hope this summary comes to great use in your future web design projects, so don’t hold back on keeping us posted.
jQuery Bubble Popup v.2.3.1
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
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 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
(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.
STYLE-MY-TOOLTIPS JQUERY PLUGIN
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
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 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)
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 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 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
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.
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 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 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 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.
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 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 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.
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.
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.
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)
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
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.
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
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
Image map with CSS3 & jQuery tooltips
Tooltip Shortcodes are a great way to provide popout tips
The jQuery Tooltip Plugin allows you to easily create tooltips with Ajax content.
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.
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.
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.
jQuery Tooltip plugin
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 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.
The tooltip appears as you hover over the target, and follows the mouse cursor until it leaves the target.
Sticky Tooltip script
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!
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
jQuery plugin: Tooltip
jQuery plugin: Tooltip Current version: 1.3 Compressed filesize: 3910 bytes License: MIT/GPL
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 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.
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 is a handsome, modern gentleman that appears when it’s showtime.
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.
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.
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.
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
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 is a simple library that builds on top of Prototype and Script.aculo.us.
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.
Rich HTML Balloon Tooltip
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.
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
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.
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.
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
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)
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
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
Colorful Map Tags
Growl Notification Style
Album Cover and Tooltip
6 Styles in Photoshop Layers to Tooltip
6 Styles in Photoshop Layers to Tooltip | Creative Styles | by Smite Design
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
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
Free PSD. Icon from iconsweet set.
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.
A small info popup created in Adobe Fireworks. Would be great for all kinds of UIs. Enjoy!
Tooltip that appears when hovering over a user/member.
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
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
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)
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)
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.
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 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 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).
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 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.