Using Prototip with AJAX (
Page 1 of 4 )
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.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.request
method.
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>
<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>
</head>
<body>
<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>
</div>
<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", "");
});
</script>
</body>
</html>
Save this version in the
pages
folder 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
ajax
property, 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
options
object which we use to specify additional options such as the
method
, and additional
parameters
. The PHP file will use the
q
parameter that we define to select the correct content for each tooltip.
/ 6 
