Home arrow AJAX & Prototype arrow Using Prototip with AJAX

Using Prototip with AJAX

In the first part of this tutorial we looked at the ease with which a default implementation of Prototip tooltips could be put on the page, and how, with just a little configuration we could change the appearance and behavior of the tooltips. In this part of the tutorial we’re going to take a look at the built-in AJAX functionality boasted by the plugin, and see how we can extend the tooltips by supplying HTML elements instead of plain text as their content.

  1. Using Prototip with AJAX
  2. Adding Some PHP
  3. Extending the Tooltips with Additional Mark-up
  4. Getting the Rules Right
By: Dan Wellman
Rating: starstarstarstarstar / 8
February 04, 2009

print this article



The source code for this article is available in the form of a downloadable zip file.

Ajax Prototips

In the last example we used a simple object as the storage medium for the text that we wanted to display in the body of the tooltip. Instead of using an object to store this information, we could use a PHP file on the server, or even a database, which we can query with PHP or another server-side language. 

Prototip relies on the AJAX functionality of the Prototype foundation upon which it is built, which is great. It gives us a high degree of control over how the request for the data is made, and can use any of the options normally used in an Ajax.requestmethod.  

What we’ll do for this next example is store the content for the tooltips in a database and use PHP to pass the data back. You’ll need to have access to an Apache-PHP-MySQL setup to run this example. If you’re a Windows user and don’t currently have an Apache setup but would like one, please see my article on Dev Shed on creating a VAMP for Vista users, or configuring Apache on an XP machine for Windows XP users.  

You’ll need the source files from part 1 of this tutorial (conveniently linked above); open prototip2.html in your text editor and change it so that it appears as follows (new code is shown in bold):  

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

<script type="text/javascript">

//get all trigger elements

var triggers = $$(".tip");


//add prototip for each trigger

triggers.each(function(item, i) {


//define each individual prototip

 new Tip (item, {

title: item.readAttribute("title"),

style: "protoblue",

stem: "leftMiddle",

hook: { tip: "leftMiddle", mouse: true },

offset: { x:30, y:0 },

 ajax: {

url: "../contents.php",

options: {

method: "get",

parameters: "q=tip" + i





//remove titles

item.writeAttribute("title", "");






Save this version in the pagesfolder as prototip3.html. The main difference is that we have taken away the second argument of the Tip constructor, so this time we’re supplying just the trigger element and the configuration object.  

Within our configuration object we’ve added the ajaxproperty, which accepts an object as its value. The properties used to configure the AJAX request include url,which allows us to specify the URL of the file that will handle the request, and a second nested optionsobject which we use to specify additional options such as the method, and additional parameters. The PHP file will use the qparameter that we define to select the correct content for each tooltip.

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