Getting the Rules Right - AJAX

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

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

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.