From Achievo/ATK Wiki

Prototype Windows can be used to create nice JavaScript Windows and Dialogs for ATK. The library even provides fancy visual effects such as fading in and out.

These windows can be easily used in ATK:

Contents 1 Register prototype javascripts and styles 2 Register tooltip styling 3 Initialize TooltipManager 4 Using the tooltips 4.1 Html content by CSS class 4.2 Ajax content by css class 4.3 Content set by addHTML 4.4 Content set by addAJAX 4.5 Content set by addURL 5 Homepage

Register prototype javascripts and styles

Register the default prototype javascripts and styles (see Prototype window).

Register tooltip styling

Default the 'alpacube' style is used. But your own styling could look like this:

.dialog
{
 z-index: 2000;
 position: absolute;
}
  
.tooltip, .underline
{
 text-decoration: underline;
}
 
.tooltip_content
{
 font: 14px "Trebuchet MS",Verdana,Arial,sans-serif; 
 overflow: hidden;
 margin: 0;
 padding: 0;
}
 
.tooltip_content h3 
{
 margin: 0;
 padding: 0;
}

Initialize TooltipManager

To initialize the TooltipManager, place the following code in your page:

 <script>
  {literal}TooltipManager.init("tooltip", {url: "", options: {method: 'get'}}, {className: 'mockatoo'});{/literal}
 </script>

You can also register the script after the onLoad of the window:

 $tooltip = 'Event.observe(window, "load", function(){ TooltipManager.init("tooltip", {url: "", options: {method: "get"}}, {className: "mockatoo"});});';
 pfPage::register_javascript_code($tooltip, false);

Using the tooltips

There are several ways to display tooltips.

Html content by CSS class

This is the easiest way to display tooltips. There's no need to use javascript afterwards.

The class of the span must be tooltip, the second part of the class has to start with html_. The part after 'html_' is the id that will be used as text in the tooltip.

<span class="tooltip html_tooltip_content1">html content by css class</span>

 <div id="tooltip_content1" style="display:none">
   <div class="tooltip_content">
     <h3>HTML Tooltip</h3>
     Tooltip 1
   </div>
 </div>

Ajax content by css class

First, add the file which contains the html that will be added by ajax:

$tooltip = 'Event.observe(window, "load", function(){ TooltipManager.init("tooltip", {url: "tooltip_ajax.html", options: {method: "get"}}, {className: "mockatoo"});});';

This file contains:

 <div class="tooltip_content">
  <h3>AJAX Tooltip</h3>
    My Ajax tooltip
  </div>
 

Your page contains:

<span class="tooltip ajax_dummy">ajax content by css class</span>

Like above, the span class starts with tooltip, the second part has to start with ajax_. The part after 'ajax_' is the id that will be used as text in the tooltip. Since this id is not explicitly defined, everything tooltip_content div will be displayed.

Content set by addHTML

The following methods need additional javascript to function. The following code can be placed on your page:

<span id="tooltip1">content set by addHTML</span>

You can use the 'tooltip_content1' from the example above. To add the content to this tooltip, add the following javascript to your page:

 <script>
  TooltipManager.addHTML("tooltip1", "tooltip_content1");
 </script>

If you add class="underline" to the span, the tooltip will be underlined (if your css is configured correctly).

Content set by addAJAX

This works very similar to the addHTML example above. Make sure the html file is url for the ajax-html file is set.

<span id="tooltip2" class="underline">content set by addAjax</span>

Add the following javascript to your page:

 <script>
  {literal}TooltipManager.addAjax("tooltip2", {url: "tooltip_ajax.html", options: {method: 'get'}});{/literal}
 </script>

Content set by addURL

You can also place the content of an URL in the tooltip:

<span id="tooltip3" class="underline">content set by addURL</span>

Add the following javascript to your page (element, html-file, width, height):

 <script>
  TooltipManager.addURL("tooltip3", "tooltip_url.html", 100, 200);
 </script>

Homepage

You can check out the Prototype Window samples site as well.