Improving the Configuration - AJAX

Let's move things up a notch by configuring some additional properties and improving our custom tooltips a little. Change the code in the last<script>tag to read: 

<script type="text/javascript">

//get all trigger elements

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

//define object containing tip contents

var content = {

tip1: "This is the help for option 1 etc...",

tip2: "Lorem ipsum dolor etc...",

tip3: "Lorem ipsum dolor etc...",

tip4: "Lorem ipsum dolor etc...",

tip5: "Lorem ipsum dolor etc..."

};

//add prototip for each trigger

triggers.each(function(item, i) {

//define each individual prototip

new Tip (item, content["tip" + i], {

title: item.readAttribute("title"),

style: "protoblue",

stem: "leftMiddle",

hook: { tip: "leftMiddle", mouse: true },

offset: { x:30, y:0 }

});

//remove titles

item.writeAttribute("title", "");

});

</script>

Save this version of the page as prototip2.html  in the pages  folder. The major addition to the code is the use of two new objects. The first is a literal object that we define to hold the text strings that will be used for the content of each tooltip. Storing these strings in an object is efficient and makes them easily retrievable later on in the code. 

The second object is also a literal object, and is supplied to the Tip  constructor as an optional third argument. This object contains the names of the properties and the values that we want to configure, and will be used internally by the Prototip plugin when it is initialized. 

We configure a number of properties in this example. Let's look at each one in turn. The title  property is used to configure a heading for the tooltip. In this example we will be using the contents of the title  attribute that we specified in our underlying HTML, instead of using this for the content as we did before. 

We can specify a new theme for the tooltips using the style  property; we can pick from a number of built-in themes for the plugin, or define a custom theme using the style  property. The built-in themes we can choose from are:

• default

• protoblue

• darkgrey

• creamy

• protogrey

The property we configure next is the stem  property, which gives the tooltip a little speech-bubble spike to the specified bit of it. We've specified leftMiddle  as the value of this property, but can pick from a number of compass-point locations around the edge of the tooltip. The stem  property is set to false  by default.  

Following this, we define the hook  property. Hooking describes how the tooltip is anchored to the target element (or mouse pointer); in the first example, the top-right corner of the tooltip was anchored to the bottom-left corner of the mouse pointer. In this example, the middle of the left edge of the tooltip will be anchored to the mouse pointer. This property takes the same compass-point values as the stem  property.  

You should note that both the stem and hook properties may be overruled depending on the size of the viewport and the value of the viewport property. The viewport property, which defines whether the tooltips should stay within the viewport or not, is set to true by default, and because we are hooking to the mouse pointer and not the trigger element, the tooltip will automatically hook to the opposite side of the mouse pointer using the opposite edge of the tooltip. 

Finally we set the offset  property; this property controls how far from the hooking element the tooltip should appear. We can set values for thexand y  axis, which are relative to the tooltip. If we supply strings as the values of these properties instead of integers, they become absolute dimensions. 

Another additional difference between this and the first example is that the anonymous function within the each()  method is passed a second argument, i,  which is the index of the current iteration. We use this to retrieve the correct string from the contents object on each iteration in the same way that we would use x  in a traditional for...next  loop. The following screen shot shows how the tooltips should now appear:

Summary

If you're already making the most of Prototype, Prototip is the ideal tooltip solution; it is efficient and lightweight (a smaller version of the file we've used in this example is available), and very easy to configure, style and implement. We've only looked at a few of the more basic configurable properties in this article, but there are many more that are available for fine-tuning the plugin. In part two of this two-part tutorial we'll be looking at how we can use the plugin's built-in functionality for AJAX tooltips.