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.

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.

{mospagebreak title=Adding Some PHP}  

We’ll also need some PHP to finish off this example; in a new page in your text editor add the following code:

 

<?php

 

//connection information

$host = "localhost";

$user = "root";

$password = "your_password_here";

$database = "prototip";

 

//make connection

$server = mysql_connect($host, $user, $password);

$connection = mysql_select_db($database, $server);

 

//get parameter

$param = $_GET["q"];

 

//query the database

$query = mysql_query("SELECT * FROM contents WHERE tip LIKE ‘$param%’");

 

//get the data

$row = mysql_fetch_assoc($query);

$contents = $row["content"];

 

//return matching data

echo $contents;

 

mysql_close($server);

?>

 

Save this in the main prototip directory as contents.php . This is a very basic PHP script for getting data out of a database that matches the incoming parameter which is available under the $_GET superglobal.  

I’d like to point out that this is the minimum amount of code required for this type of operation; security has not been a consideration in this example, so this file should not be used in a mission-critical application that is publicly available.  

To see this example, you’ll need to copy the prototip directory (containing the libraries, plugins and files that we’ve made so far) into a content-serving directory of your web server. You’ll also need a MySQL database called prototip containing a table called contents, with the name of each tooltip in a column called tip and the content for each tooltip in a column called content. To make it easier to load data into this table once created, I’ve included a text file in the source code download for this article which can be used to load the data.  

Once this has been done, you should be able to run the new page and see something like this:

 

{mospagebreak title=Extending the Tooltips with Additional Mark-up}

So far all of our examples have used simple text as the heading and content for the tooltips; in addition to this we can also supply other content such as images, using HTML instead of plain text within the tooltips. This gives us much more flexibility over the behavior and appearance of the tooltips, and allows us to add images, lists, and other elements. 

We’ll make a new page for this example; we can have a series of thumbnail-sized images on the page along with some descriptive text. Whenever one of the thumbnail images is rolled over, we can show the full-sized version in a tooltip. The page we’ll end up with should look something like the following screen shot:

 

 

In a new file in your text editor, then, create the following basic page:

 

<!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/imagetips.css">

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

<title>Prototip Example</title>

</head>

<body>

<div id="outerContainer">

<h1>Phenomena of the Universe</h1>

<div class="container">

<div class="contents">

<h2>Galaxies</h2>

<div class="placeholder">

<img class="thumb" id="galaxy" src="../images/space/thumbs/galaxy_thumb.jpg" alt="Spiral Galaxy NGC 4526">

</div>

<p>A galaxy is a system of stars, etc…</p>

</div>

</div>

<div class="container">

<div class="contents">

<h2>Stars</h2>

<div class="placeholder">

<img class="thumb" id="star" src="../images/space/thumbs/star_thumb.jpg" alt="UV Trace of the Sun">

</div>

<p>A star is a huge, shining ball in space etc…</p>

</div>

</div>

<div class="container">

<div class="contents">

<h2>Nebulae</h2>

<div class="placeholder">

<img class="thumb" id="nebula" src="../images/space/thumbs/nebula_thumb.jpg" alt="The Crab Nebula">

</div>

<p>A nebula is a cloud of dust particles etc…</p>

</div>

</div>

<div class="container">

<div class="contents">

<h2>Dark Matter</h2>

<div class="placeholder">

<img class="thumb" id="dark" src="../images/space/thumbs/dark_thumb.jpg" alt="A Ring of Dark Matter">

</div>

<p>The name dark matter comes from etc…</p>

</div>

</div>

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

 

Save what we have so far as prototip4.html in the pages folder. We have a series of content blocks, each with a heading, some text and an image; the images will become triggers for the tooltips when we add the script. We have some elements, such as the placeholder and contents div elements which are used purely for styling. Prototips look so great that I couldn’t just leave the page bare for this example! 

{mospagebreak title=Getting the Rules Right}

Now we need some CSS. In a new file in your text editor add the following selectors and rules:

 

#outerContainer { width:800px; }

.container {

width:370px; float:left; padding:7px 0 0 0;

background:url(../images/containerTop.gif) no-repeat 0 0;

margin:0 10px 10px 0;

}

.container .contents {

width:350px;

background:url(../images/containerBody.gif) no-repeat 0 100%; padding:0 10px 10px;

}

.container h2 {

font-size:12px; font-weight:bold; font-family:verdana;

margin:0 0 10px;

}

.container .placeholder {

float:right; width:132px; height:132px; margin:5px 10px 5px 15px;

background:url(../images/placeholder.gif) no-repeat;

position:relative;

}

.placeholder img { position:absolute; left:6px; top:6px; }

.container p { margin:0; }

 

/* override prototip styles */

.prototip .protogrey .content { padding:0; margin-bottom:-5px; }

 

Save this in the css folder as imagetips.css . Mostly this is just layout stuff, although at the end of the file we have a selector and some styles that override the default styling of the prototips. This is necessary to get the images in the tooltips without having a border of white around each image.  

Finally we can add the script that will bring it all together; add the following code after the last script element in prototip4.html:

 

<script type="text/javascript">

//get all trigger elements

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

 

//add prototip for each trigger

triggers.each(function(item, i) {

 

//create full size image for tooltip

var image = document.createElement("img");

var id = item.readAttribute("id");

image.writeAttribute("src", "../images/space/large/" + id + "_large.jpg");

 

//define each individual prototip

new Tip (item, image, {

title: item.readAttribute("alt"),

showOn: "click",

style: "protogrey",

width:300,

hideOn: { element: "closeButton", event: "click" },

hook: { target: "bottomRight", tip: "topLeft" },

offset: { x: -126, y: -126 }

});

});

</script>

 

We use the same loop construct in this example as we have before, although this time we create a new image and add an src attribute based on the path to the large images and the id of the current thumbnail.  

We also use some different properties this time, like the showOn , hideOn and width properties. The width property is an easy way to control the width of the tooltip without overriding styles. We set showOn to click ,  which configures the event that generates the tooltips.  

We aren’t using the tooltips like traditional tooltips; we want them to stay open until the close button is clicked, rather than close when the pointer moves off of the target element. For this reason, we also specify the hideOn property, which takes an object taking the name of an element and an event. Using the built-in closeButton as the element automatically adds the close button to the tooltip for us.  

Finally we hook to the target element (the thumbnail) instead of the mouse pointer. This means that the tooltip will not track with the mouse. We use the offset property to lay the tooltip over the top of the thumbnail image.

Summary

Prototip provides an excellent foundation for building great-looking and responsive tooltips. It comes with many configuration options that allow us to easily tailor the plugin to our own implementation needs.

[gp-comments width="770" linklove="off" ]
antalya escort bayan antalya escort bayan