WebAppers » Tooltips

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
Step by Step – Show, Explain and Guide Your Visitors
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: http://masterfidgeter.com/projects/captify/
License: MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Preview Images with imgPreview jQuery Plugin

Ray Cheung — Wed, 04 Feb 2009 07:01:26 +0000

A New jQuery plugin: imgPreview 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.

Additionally, it allows for quite a high level of customisation with Callback functions as well. You can also specify a thumbnail prefix for images. So, it won’t take too long time to load larger images.

Requirements: jQuery Framework
Demo: http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Fully Featured Image Magnifier with Dojo Zoomer

Ray Cheung — Wed, 21 Jan 2009 07:01:30 +0000

It began as a simple Drag and Drop / Constrained Mover example, and with the help of a couple #dojo community members took shape into a fully featured demo showing the power of the Dojo Toolkit.

Peter Higgins has created Dojo Zoomer. It is divided into 3 panels. By hovering over the image on the left panel, right panel dynamically displays the cropped portion of the image, so that you can focus explicitly on the portion of the main image that interests you. You can see a list of thumbnails at the bottom panel which is enhanced with a paging/switching mechanism with dojo.fx and some onclick events as well.

Requirements: Dojo Framework
Demo: http://dante.dojotoolkit.org/dojobox/anon/release/dojo/demos…
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

jQuery Javascript Image Magnifier under GPL

Ray Cheung — Tue, 16 Dec 2008 07:01:20 +0000

jQZoom Evolution is a new release of jQZoom with full featured. It is a javascript image magnifier built at the top of the popular jQuery javascript framework. jQzoom Evolution is a great and a really easy to use script to magnify what you want. It is easy to customize and it works on all modern browsers. This software is licensed under GPL. You can have your jQZoom in your website, eCommerce sites or whatever you want.

You can also look at other image zooming scripts we mentioned earlier on “Javascript and Flash Image Zoom Tools” and “Open Source Image Magnifier in Javascript”

Requirements: jQuery Framework
Demo: http://www.mind-projects.it/projects/jqzoom/
License: GPL License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Simple Transparent Tooltips with jQuery and CSS

Ray Cheung — Fri, 17 Oct 2008 07:01:02 +0000

CSS tooltips are very popular in modern web design and contrary to popular belief it is really easy to create them, especially with one of the all so popular javascript frameworks. In that case, you have to use at least a plugin. However, Kriesi.at has shared us an article of “Create simple tooltips with CSS and jQuery” which teaches us how to get some basic tooltips with only about 10 lines of CSS and jQuery Code.

Requirements: jQuery framework
Demo: http://www.kriesi.at/wp-content/extra_data/tooltip_tutorial/step1.html
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images