Home arrow AJAX & Prototype arrow Page 3 - Using Prototip

The Style Sheet - AJAX

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.

TABLE OF CONTENTS:
  1. Using Prototip
  2. Basic Implementation
  3. The Style Sheet
  4. Improving the Configuration
By: Dan Wellman
Rating: starstarstarstarstar / 6
January 28, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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! 



 
 
>>> More AJAX & Prototype Articles          >>> More By Dan Wellman
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: