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.

TABLE OF CONTENTS:

By: Dan Wellman

Poor Best

Rating:

/ 8

February 04, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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

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

//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", "");

});

</script>

</body>

</html>

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.