Category Archives: Tutorials

In this article I am going to show you how to create a simple Tooltip effect using jQuery. What’s great about this method is that it degrades gracefully, so if someone doesn’t have Javascript enabled they don’t see anything out of place.

The tooltip that we will be creating will appear when we hover over a link. We will use the HTML5 custom data attribute (data-*) to hold our information, then use jQuery to dynamically create a container (div) to hold the information within the custom data attribute.

This tutorial assumes that you have some understanding of jQuery but I’ll be explaining everything as we go so should be good for beginners as well. You will also need to understand HTML and CSS.

By now most web designers and developers have a very good understanding of jQuery and its capabilities; for most it is their go to JavaScript library when adding some additional functionality or interactivity to their web pages.

However there are still plenty of people out there who are new to web development and who would like to get started with this great language but don’t know how to.

Well, this one’s for you!

In this tutorial aimed at absolute jQuery beginners you’ll learn about:

• What is jQuery?
• Installing the jQuery Library
• The Document Ready function
• .click() and .hide()
• Understanding the Syntax
• .toggle()
• .slideToggle() and .find()
• Animation Speed
• .css(), this Selector and Basic Selector Filters
• .hasClass(), .addClass(), .removeClass() and if Statements

Lots for the absolute beginner to get stuck into and see what the world of jQuery has to offer.

This is an update on a previous post that showed you how to create a simple pop-up div using jQuery. The update shows you to recreate the same effect on multiple pop-up divs using the .prev() method, meaning you can avoid duplicating the code unnecessarily.

Included in the tutorial is a demo so that you can preview the script you will be learning to write, plus the source code for you to download and keep for future reference.

This is an easy tutorial suitable for those fairly new to jQuery. This tutorial will teach you how to create a simple pop-up effect, showing a hidden div, when you hover over the trigger link.

Included in the tutorial is a demo so that you can preview the script you will be learning to write, plus the source code for you to download and keep for future reference.