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!