The Style Sheet - AJAX

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!