Prototype tooltips

ATK Howto: Prototype tooltips Complexity: Easy Author: Jeroen <jeroenvs@ibuildings.nl>

List of other Howto's

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:

Register prototype javascripts and styles

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

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 div 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 div that will be used as text in the tooltip. Since this div is not explicitly defined, the complete tooltip_content will be displayed.