WebAppers » Tooltips

TinyTips – Lightweight jQuery Plugin for Tooltips

Ray Cheung — Sat, 27 Feb 2010 07:01:50 +0000

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.

Requirements: jQuery Framework
Demo: http://www.digitalinferno.net/demos/tt-1-0/index.html
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Flickr-Style Photo Tagging Using jQuery

Ray Cheung — Mon, 08 Feb 2010 07:01:18 +0000

A few days ago, Ben Nadel programmed a little proof-of-concept for Flickr-style photo tagging using jQuery. He did it as an exploration in mouse-based event binding. He took a step further and packaged the jQuery code up into a jQuery plugin (phototagger.jquery.js), build a light-weight ColdFusion persistence layer (drop-and-run, no database required), and turned it into an official project: jQuery Photo Tagger.

jQuery Photo Tagger comes in at about 1,000 lines of code. As such, you can either check out the project page or try the online demo for yourself. Please note that you have to hold CTRL key when clicking mouse to create hotspot.

Requirements: jQuery Framework
Demo: http://www.bennadel.com/resources/projects/jquery_photo_tagger…
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

TipTip Custom Tooltip jQuery Plugin with Zero Images

Ray Cheung — Mon, 18 Jan 2010 07:01:02 +0000

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. 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 jQuery Plugin is dual licensed under the MIT and GPL licenses. It’s also only 3.5kb minified!

Requirements: jQuery Framework
Demo: http://code.drewwilson.com/entry/tiptip-jquery-plugin
License: GPL, MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

How to Build the New Visual Annotations with CSS3

Ray Cheung — Thu, 14 Jan 2010 07:01:10 +0000

ZURB has taught us How to Build the New Visual Annotations. The solution was not technically too complex. With Notable, they have embraced the concept of graceful degradation: they take advantage of new CSS techniques that degrade cleanly to older browsers.

The note overlays are composed of two main elements, an outer border div and an inner overlay div. The trickiest piece, and most fun, was actually the gradient on the border. They didn’t want to use a canvas knockout so instead they used border-image, which is a really versatile but slightly tricky CSS property.

The basic gist of border-image is that you can set an image of your choosing as the overlay for the border of an object, but the truth is quite a bit more complicated.

Requirements: CSS3 Support
Demo: https://zurb.notableapp.com/website-feedback/10696…
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Show Your Links as a Drop Down List with Pluralink

Ray Cheung — Wed, 04 Nov 2009 07:01:02 +0000

Pluralink is an amazing javascript plugin to arrange multiple links in your text. Here is how it works. Suppose you have to include 3 links in a text. What you usually do is that you list it one after the other in a single line which gives a feeling of repetition. For example, if you want to link to google, yahoo and bing in a single line, you will write as “the three top search engines google, yahoo, bing contribute …”.

But with Pluralink you can show all your links as a drop down list from which the user can choose any of those. It gives a nicer look as well. You can download either the pure pluralink version or the wordpress plugin version for free.

Requirements: -
Demo: http://pluralink.com/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Greyscale Hover Effect with CSS & jQuery

Ray Cheung — Thu, 24 Sep 2009 07:01:45 +0000

A few months ago, James Padolsey introduced a cool greyscale technique for non-IE browsers. His technique inspired SohTanaka to come up with a workaround with a similar effect.

Greyscale Hover Effect with CSS & jQuery relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/hover-over-trick/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Get a Closer Look with AnythingZoomer jQuery Plugin

Ray Cheung — Wed, 22 Jul 2009 07:01:04 +0000

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. AnythingZoomer is a jQuery plugin that does it.

It’s flexible in many ways, in that the “small”, “large”, and “zoom” areas are all pretty easy to customize via CSS. It’s inflexible in other ways, in that it doesn’t “automatically” work by cloning content or anything like that (which is arguably more flexible), and the HTML structure is fairly rigid.

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/AnythingZoomer/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Create a Content Rich Tooltip with JSON and jQuery

Ray Cheung — Mon, 13 Jul 2009 11:21:35 +0000

Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array. Here’s a look at the final result that we’ll be looking to make:

Our page will have two links. When a user hovers over a link, it will trigger the top banner to change its background image and text based on the entry in a JSON array. See the Demo

We’ll be using a pack of background images in later steps. You can grab those here.

Build the Page Structure

New File: I have called my HTML file ‘json-tooltip.htm” for this tutorial

Our example’s HTML is pretty self explanatory. We’re just blocking out a banner to contain the tooltip information, and then placing all of the normal content below.

Pay special attention to what’s going on with link anchors with a class of “tooltip” though. This is the class that will designate which links are tooltips. Also, you’ll notice that the “rel” attribute contains a number. This is the number we’ll use to associate a specific tooltip to an anchor link. This will become clear in a few steps.



	
	
		

		jQuery/JSON Tooltip Demo

		

		
		
		

	

	
		

			
					Go On
					Hover over a link below
			

			The link in this sentence will display a tooltip on hover.

			If you're feeling adventurous, you could always givethis link a try too!

Size and Style with CSS

New File: I have called my CSS file ‘json-tooltip.css” for this tutorial

Since the bulk of this layout will be done in jQuery, the CSS is only responsible for sizing the banner div to proper size. I’ve also included optional font styles for presentation sake.

*{margin:0; padding:0;}

	body{font-family:georgia; background:#191919;}

		p{padding:0px 30px; font-size:13px; margin-bottom:15px; line-height:1.6em;}

		a{padding:3px 6px; background:#333; color:#FFF; margin:0px 3px; text-decoration:none;}
			a:hover{color:#FFC125;}

	#wrapper{margin:10px auto; width:960px; padding-bottom:30px; background:#FFF; border:1px solid ##F7F7F7;}
		#banner{background:#DDD url('purple-bg.jpg') no-repeat top left; height:300px; text-align:center; margin-bottom:30px; border-bottom:1px solid #CCC;}
			#banner h1{padding:55px 0px 15px 0px; font-size:60px; font-family:Arial, sans-serif; letter-spacing:-3px}
			#banner p{color:#333; font-size:16px;}

The Logic Behind JSON

Some of you may ask “Why use JSON to populate the ‘tooltip’?” The average Javascript tooltip is populated by the contents of the “title” attribute of the anchor link. This is a great approach for text only tooltips, but if you’re looking to add more information it can get a little messy.

This tutorial demonstrates one way that your tooltips can activate full body content changes using arrays, rather than pulling from various hidden elements on the page. This way we can include any number of elements to the layout besides text.

If you’re new to JSON, don’t panic. It is essentially a very simple way to build and access arrays in Javascript, much in the style of its PHP counterparts. You can also read a more comprehensive primer here for more.

Create Array with JSON

New File: I have called my Javascript file ‘json-tooltip.js” for this tutorial

For the sake of simplicity, there are only two entries in the tooltips array for this tutorial. As you can see below, each contains three fields:

1. A title (”Title”) to be loaded into the banner’s h1 tag.
2. The content (”Content”) to be loaded in the banner’s p tag.
3. An image url (”ImageURL”) to be loaded as the banner’s background.

Paste the code below into the top of your JS file to establish the tooltip array

//JSON banner content array
	var banner_data = {
		//Tooltips
		"tooltips" : [

			//Remember that the count starts at zero

			{
				//Array ID -> 0
				"Title"   : "Oh Yes",
				"Content" : "That's some good hovering.",
				"ImageURL"   : "yellow-bg.jpg"
			},

			{
				//Array ID -> 1
				"Title"   : "Nice",
				"Content" : "You found link number 2",
				"ImageURL"   : "orange-bg.jpg"
			}

		]
	}

Preload Images with jQuery

This is a quick fix to help keep things smooth. Because the jQuery will be referencing background images that are not loaded by default, it would be nice to have them preloaded to prevent further hiccups. For this we’re turning to a handle plugin that automatically preloads images once the document is ready.

To implement the preloader, we’ll first need to paste in the following immediately below the JSON array code from the previous step. This code declares a new jQuery preloader method.

// Image Preloader via http://www.innovatingtomorrow.net/2008/04/30/preloading-content-jquery
	jQuery.preloadImages = function()
	{
	  for(var i = 0; iNext we’ll need to go through the entire JSON array on document ready and load the images in each entry. The loop I’ve written below will go through each and load the corresponding image, providing it is not empty.
Note: Remember that since this is where the jQuery starts, it goes within the document ready function along with the code from the next step.
//Actual jQuery starts here on document ready
	$(document).ready(function() {

		//Goes through each tooltip's image URL
		for(var i = 0; i < banner_data.tooltips.length; i++){

			image_location = banner_data.tooltips[i].ImageURL;

			//Preload if location exists
			if (image_location != ''){
				$.preloadImages(image_location);
			};

		};

	});
Show Tooltip Contents with jQuery
Here's where we get to the bulk of the jQuery for the page. Tooltips will be activated via hover, and then deactivated when the hover state is removed.
When a tooltip is activated, jQuery will populate the banner with the information from the corresponding JSON entry. This active tooltip is determined by getting the value of the tooltip's rel attribute.
Copy in the code below within the already active document ready function created in the last step.
$('a.tooltip').hover(function(){ //when hover starts

		//Get the ID of the current tooltip
		active_tooltip = $(this).attr('rel');

		//Replace the HTML in the header with data from JSON array
		$('#banner h1').html(banner_data.tooltips[active_tooltip].Title);
		$('#banner p').html(banner_data.tooltips[active_tooltip].Content);
		$('#banner').css("background-image", "url("+ banner_data.tooltips[active_tooltip].ImageURL + ")");

	},
	function(){ //When hover ends

		//Reset banner to defaults
		$('#banner h1').html("Go On");
		$('#banner p').html("Hover over a link below");
		$('#banner').css("background-image", '');

	});
Go ahead and give it a run! If you experience any errors, I recommend checking your results against the demo files available for download.
About the Author
Zach is a co-founder of One Mighty Roar, a web design company that runs a network of blogs centered on creativity. He and his twin brother are behind Build Internet, where he blogs on web design, development and business. Connect with him on Twitter for more.
Requirements: jQuery Framework, JSON
 Demo: http://www.webappers.com/demo/json-tooltip/
 Download: http://www.webappers.com/download/json-tooltip-final.zip
 License:  License Free
Related Posts
BoxOver DHTML/Javascript Lightweight Tooltips
Replace Your Default Tooltip with Pretty (mb)Tooltip
Simple Transparent Tooltips with jQuery and CSS
Unobtrosive Bubble Tooltips with Javascript and CSS
Fade In and Out Tooltips for Prototype and Scriptaculous
Sponsors
Pixmac: Stock Photos, Royalty Free Pictures and Images

Replace Your Default Tooltip with Pretty (mb)Tooltip

Ray Cheung — Fri, 13 Mar 2009 07:01:13 +0000

(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.

Requirements: jQuery Framework
Demo: http://www.open-lab.com/mb.ideas/index.html#mbTooltip
License: GPL License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Captify Displays Pretty Image Captions Appear On Rollover

Ray Cheung — Tue, 03 Mar 2009 07:01:05 +0000

Captify jQuery Plugin displays simple, pretty image captions that appear on rollover. Captions can be locked “always-on”, or set to fade in on rollover. Also, captions can slide in from the top or the bottom.

Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. unlike ImageCaptions at the moment, Captify is easy to use, small/simple, and completely ready for use in production environments. Captify has been tested on Firefox, Chrome, Safari, and Internet Explorer.

Requirements: jQuery Framework
Demo: //thirdroute.com/projects/captify/
License: MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images