Installation:

Upload all the files from the Prototip package to your server. The images, CSS and the Javascript. If you decide on a different folder structure you will need to set the correct image path by changing this line in prototip.js:

images: '../images/prototip/',

Your document needs a doctype, I recommend using a Transitional or Strict doctype. Here’s how to setup a Transitional doctype, at the top of your document above your html tag add:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Prototip requires Prototype 1.6.0.3. In the example below I’m including Prototype using the Google AJAX Libraries API. As an alternative you could download and host Prototype yourself, but by including it using Google’s AJAX Libraries API you don’t have to worry about caching and bandwidth cost.

Add Prototip below Prototype, the correct order is as in the example below.

<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'></script>
<script type='text/javascript' src='js/prototip.js'></script>

Add prototip.css to your header.

<link rel="stylesheet" type="text/css" href="css/prototip.css" />

How To Use
Creating a tooltip is as easy as:

new Tip(element, 'content');

To create a more advanced tooltip you can add an optional thirth parameter with options:

new Tip(element, 'content', {
  title: 'This tooltip has a title',
  style: 'protoblue',
  stem: 'topLeft',
  hook: { tip: 'topLeft', mouse: true },
  offset: { x: 14, y: 14 }
});

Hooking
Hooking allows you to place your tooltips anywhere in relation to your target elements. The concept is simple, you define two corners that you want to ‘hook’ to eachother. One on the target element, the other one on the tooltip.

hook: { target: 'bottomRight', tip: 'topLeft' }

You can also hook your tooltip to the mouse pointer. Offset can be used to prevent the tooltip from appearing directly under the mouse icon.

hook: { tip: 'topLeft', mouse: true },
offset: { x: 14, y: 14 }

Stems
Stems are a nice way to show where the tooltip came from. After giving your tooltip a style you can set the position of the stem as shown in the example below. The image on the right shows all possible stem positions.

new Tip(element, { stem: 'topLeft' });

Ajax
Ajax tooltips allow you to pull content from an url, keeping your code clean. The content argument is left out when you use ajax. Use url to set the location for the Ajax Request. The options parameter can hold anything you would otherwise set on an Ajax.Request as options. See the Prototype API on Ajax.options and Ajax.Request for more details.

new Tip(element, {
  ajax: {
    url: '/include/ajax.php',
    options: {
      onComplete: function() { alert('ajax content loaded'); }
    }
  }
});

Custom Events
The following examples are a bit more advanced. The custom events prototip:shown and prototip:hidden allow you to call a function when tooltips open or close. You can do this by observing the element that opens the tooltip. If you have firebug installed you can run the examples below from your console, this one works on the first demonstration.

$('demo_simple').observe('prototip:shown', function() {
  this.pulsate({ pulses: 1, duration: 0.3 });
});

Custom events bubble up so can monitor the document for them. This makes it possible to monitor all tooltips at once. Here’s how to call a function when every tooltip hides.

document.observe('prototip:hidden', function(event) {
  event.element().shake(); // our target element, we shake it with Scriptaculous
});

Atomically add tooltips
To make it a bit easier to manage tooltips you can create them automatically based on a CSS condition. Here’s how to do this for every link in the page using rel attibutes, after the page has finished loading. Since $$ accepts a CSS selector it could also be used to target different groups of elements.

document.observe('dom:loaded', function() {
  $$('a[rel]').each(function(element) {
    new Tip(element, element.rel);
  });
});

Style
A new style can be created with a few lines of code. When opening prototip.js you will see Prototip.Styles, an object containing a few predefined styles. These can be used as an example.

After you have given your style a name you will need to create a folder with the same name inside the ‘images/prototip/styles/’ folder. There you can place PNG images to style the closebutton and stems. Here’s how the default tooltip is created.

 'default': {
    border: 6,
    borderColor: '#c7c7c7',
    className: 'default',
    closeButton: false,
    hideAfter: false,
    hideOn: 'mouseleave',
    hook: false,
    radius: 6,
    showOn: 'mousemove',
    stem: { height: 12, width: 15 }
  },

The className points to a class in prototip.css, this class is used to finetine the styling. After you’ve completed setting up your style, you can use it with the style option on a tooltip.

/* the default style */
.prototip .default { color: #808080; }
.prototip .default .toolbar {
  background: #f1f1f1;
  font-weight: bold;
}
.prototip .default .title { padding: 5px; }
.prototip .default .content {
  padding: 5px;
  background: #fff;
}

note: Prototip.Styles contains more than just styling, styles will make your Tip calls smaller.

Demo: http://www.nickstakenburg.com/projects/prototip2/

Download:http://www.nickstakenburg.com/projects/download/?project=prototip#

Source:http://www.nickstakenburg.com/projects/prototip2/

Related Listings:

1. Style Your Websites Tooltips With Prototip Now it’s very easy to creat complex tooltips. Here is...
2. Poly Tooltip v1.1 PolyTooltip – a very easy way to make HTML tooltips...
3. jQuery plugin Tooltip Script Replacing standard tooltips is easy: Just include the script on...
4. jQuery plugin – Tooltip Ajax Script The content of a tooltip is by default the title...
5. CSS Tooltips Avoid cross-browser javascript when you can use css to make...

Do you like this post?

Email: