Tooltip pop-up

From pixyWiki

pixyBlog uses Jonathan Weiss' nice-and-simple tooltip script to display the pop-up/tooltip windows. The tooltip script requires the prototype framework and the script.aculo.us script. So to get it working you would need the following in the <head> tag of your HTML :

<script type="text/javascript" src="$url.site/theme/scripts/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="$url.site/theme/scripts/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="$url.site/theme/scripts/tooltip.js"></script>

From the tooltip-0.2.js docs:

This tooltip library works in two modes. If it gets a valid DOM element or DOM id as an argument it uses this element as the tooltip. This element will be placed (and shown) near the mouse pointer when a trigger-element is moused-over. If it gets only a text as an argument instead of a DOM id or DOM element it will create a div with the classname 'tooltip' that holds the given text. This newly created div will be used as the tooltip. This is usefull if you want to use tooltip.js to create popups out of title attributes.

Usage:

<script type="text/javascript">
// with valid DOM id
var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')

// with text
var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')

// create popups for each element with a title attribute
Event.observe(window,"load",function() {
  $$("*").findAll(function(node){
    return node.getAttribute('title');
  }).each(function(node){
    new Tooltip(node,node.title);
    node.removeAttribute("title");
  });
});
</script>

Now whenever you trigger a mouseover on the 'trigger' element, the tooltip element will be shown. On a mouseout the tooltip disappears.

Example:

<div id='tooltip' style="display:none; margin: 5px; background-color: red;">
Detail infos on product 1....<br />
</div>

<div id='product_1'>
This is product 1
</div>

<script type="text/javascript">
var my_tooltip = new Tooltip('product_1', 'tooltip')
</script>

You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.

Retrieved from "http://wiki.pixyblog.com/Tooltip_pop-up"