Home arrow AJAX & Prototype arrow Page 4 - Using Prototip with AJAX

Getting the Rules Right - 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



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 {


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;



.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 cssfolder 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",


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

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

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





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

We also use some different properties this time, like the showOn, hideOnand widthproperties. The widthproperty is an easy way to control the width of the tooltip without overriding styles. We set showOnto 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 hideOnproperty, which takes an object taking the name of an element and an event. Using the built-in closeButtonas the element automatically adds the close button to the tooltip for us.  

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


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.

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