Using Prototip

Prototype is a popular open source JavaScript framework that is favored by many for its extensive toolset that makes implementing advanced JavaScript functionality a breeze. Prototip is a plugin for Prototype that lets you quickly and easily add fantastic-looking tooltips to your pages with a minimum of code and effort.

Prototip was developed by Nick Stakenburg and can be downloaded from http://www.nickstakenburg.com/projects/prototip2/. The latest version of Prototip is 2.0.5. You can download a trial of the plugin from the link above, which can be used for testing purposes (you’ll need this if you intend to follow along with the code examples in this article), but to use the plugin on single or multiple domains, you need to purchase a license.

You can also download the source files for this article in zip form.  

The plugin is licensed as Creative Commons by-nc-nd, which means that there are certain conditions that must be met to use it; specifically, you must attribute the work to the author, you may not use the plugin commercially (i.e, you may not sell it), and you may not build upon, alter or make derivatives of it.

There are a range of pricing options that should suit most developers. These are outlined below:

 

Single non-commercial domain

3 (approx $4 or £2)

Unlimited non-commercial domains

15 (approx $19 or £12)

Single commercial domain

49 (approx $63 or £41)

Unlimited commercial domains

295 (approx $378 or £248)

Now that we have seen what Prototip is, where it can be found, and how much it costs, let’s see how easy it is to use. You’ll need to unpack the downloaded plugin, and will also need to download and unpack the Prototype library, and optionally the Scriptaculous effects library. To download both Prototype and Scriptaculous in a single package, visit http://script.aculo.us/downloads and choose the latest version.  

We’ll need to set up a basic development area for the libraries and plugins to reside in; create a new directory on your C drive called  prototip . Next, unpack  the  scriptaculous   zip file into this folder, which will preserve the Prototype and Scriptaculous directory structure. In the Prototip zip file there are three folders:   images css   and  js . These can all be unpacked to the  prototip   directory as well. Finally, create a new folder within the prototip  folder  called   pages .

{mospagebreak title=Basic Implementation}

Now that we’re ready to put Prototip to use, let’s make a basic example page that has some images on it which will produce the tooltips when they are hovered over — something like the following screen shot:

 

 

In a new page in your text editor start with the following code:

 

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

</body>

</html>

 

Save this as  prototip1.html   in your  pages   folder. It is essential that pages which use the Prototip plugin are placed in a folder at the same directory level as the images folder. This is because some of the elements that make up the tooltips have style attributes written to them when they are dynamically created by the plugin.  

Our page contains the elements making up our test form; the labels, selects and the links that we’re going to use as the tooltip triggers. Each link has several attributes, including a title for use in situations where JavaScript is disabled. This is an important aspect of progressive enhancement, in which we define an inner core of base content, then where possible extend it. Following this we link to the Prototype, Scriptaculous and Prototip script files. 

{mospagebreak title=The Style Sheet}

Our custom style sheet initially is going to be as simple as the page, and consists of the following selectors and rules:  

#container {

width:243px; height:120px; border:1px solid #000000; padding:15px;

position:absolute; top:100px; left:100px;

}

#container label, #container select {

float:left; margin-right:12px; font-size:11px; font-family:Verdana;

font-weight:bold; position:relative; top:2px;

}

#container a {

float:left; width:25px; height:25px;

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

}

This can be saved in the  css   folder as  mytips.css . These two files (as well as the image used for the help icons, which can be found in the code download for this article and should be dropped into the  images   folder) should all go together to make the page from the first screen shot, although it won’t actually do anything yet. 

Now for the fun part; after the  <script>   that links to  prototip.js,  add the following code: 

<script type="text/javascript">

//get all trigger elements

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

 

//add prototip for each trigger

triggers.each(function(item) {

 

//define each individual prototip

new Tip (item, item.readAttribute("title"));

 

//remove titles

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

});

</script>

We first get all of the anchor elements within our container and store them in the   triggers  array using standard Prototype syntax. We get the elements based on the class name  tip   which we gave to the anchors in the underlying HTML. 

We then use Prototype’s  each()   method to iterate over each element stored in the array and execute an anonymous function for each one. Within this function we define a new Prototip tooltip using the  Tip()   constructor. 

This constructor takes two arguments in this example. The first is the trigger element, which is the element on the page that will generate the tooltip when it is hovered over. The second argument is the content to use for the tooltip. 

We pass our anonymous function the  item   argument, which contains the current item from the array. We specify the current item as the trigger and the title attribute (which we added in the underlying HTML) as the tooltip’s content.  

Finally we use Prototype’s  writeAttribute()   method to set the  title   attribute to an empty string, which prevents the default OS tooltip from displaying, as well as the Prototip tooltip.  

The result of this code is that, when the page is run, a new Prototip tooltip is created for each anchor element, as shown in the following screen shot:

 

 

As you can see, the standard tooltip generated by the OS is replaced by a very attractive Prototip complete with styling and behavior. The tooltip will automatically track with the mouse, will automatically be given cross-browser image-free rounded corners, and have its z-index adjusted so that it appears on top of other elements on the page. And this is just the default implementation with no additional configuration! 

{mospagebreak title=Improving the Configuration} 

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 the x and 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.

[gp-comments width="770" linklove="off" ]

chat