Basic Implementation - AJAX

Prototype is a popular open source JavaScript framework that is favored by many for its extensive toolset that makes implementing advanced JavaScript functionality a breeze. Prototip is a plugin for Prototype that lets you quickly and easily add fantastic-looking tooltips to your pages with a minimum of code and effort.

TABLE OF CONTENTS:

By: Dan Wellman

Poor Best

Rating:

/ 6

January 28, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Now that we're ready to put Prototip to use, let's make a basic example page that has some images on it which will produce the tooltips when they are hovered over -- something like the following screen shot:

In a new page in your text editor start with the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Prototip Example</title>

</head>

<body>

<label>Option 1</label><select><option>Choose an Option</option></select><a class="tip" id="help1" href="#" title="Help for option 1"></a>

<label>Option 2</label><select><option>Choose an Option</option></select><a class="tip" id="help2" href="#" title="Help for option 2"></a>

<label>Option 3</label><select><option>Choose an Option</option></select><a class="tip" id="help3" href="#" title="Help for option 3"></a>

<label>Option 4</label><select><option>Choose an Option</option></select><a class="tip" id="help4" href="#" title="Help for option 4"></a>

<label>Option 5</label><select><option>Choose an Option</option></select><a class="tip" id="help5" href="#" title="Help for option 5"></a>

</div>

</body>

</html>

Save this as prototip1.html in your pages folder. It is essential that pages which use the Prototip plugin are placed in a folder at the same directory level as the images folder. This is because some of the elements that make up the tooltips have style attributes written to them when they are dynamically created by the plugin.

Our page contains the elements making up our test form; the labels, selects and the links that we're going to use as the tooltip triggers. Each link has several attributes, including a title for use in situations where JavaScript is disabled. This is an important aspect of progressive enhancement, in which we define an inner core of base content, then where possible extend it. Following this we link to the Prototype, Scriptaculous and Prototip script files.

Next: The Style Sheet >>