Home arrow AJAX & Prototype arrow Page 2 - Using Prototip

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.

  1. Using Prototip
  2. Basic Implementation
  3. The Style Sheet
  4. Improving the Configuration
By: Dan Wellman
Rating: starstarstarstarstar / 6
January 28, 2009

print this article



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">



<link rel="stylesheet" type="text/css" href="../css/prototip.css">

<link rel="stylesheet" type="text/css" href="../css/mytips.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Prototip Example</title>



<div id="container">

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


<script type="text/javascript" src="../scriptaculous-js-1.8.2/lib/prototype.js"></script>

<script type="text/javascript" src="../scriptaculous-js-1.8.2/src/effects.js"></script>

<script type="text/javascript" src="../js/prototip.js"></script>




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. 

>>> More AJAX & Prototype Articles          >>> More By Dan Wellman

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates


Dev Shed Tutorial Topics: