Bgx Tooltip Component - Documentation

Usage examples for the BGX Tooltip Component (Flash MX 2004)

Overview

Positioning
Multiline
Using HTML
Custom Appearance
Using the Macromedia List Component
Using the Macromedia Tree Component

For a full documentation of the component see http://www.bgxcomponents.com/components/bgx_tooltip/BgxTooltip_documentation.htm

Positioning

The following shows the positioning of the tooltip relative to the area of the stage where the mouse event occurs. Roll over the green spots to see the effects.

Code example:

mcBottomLeft.onRollOver = function()
{
    tooltip.label = "Bottom left";
    tooltip.showTooltip();
}
mcBottomLeft.onRollOut = function()
{
    tooltip.hideTooltip();
}

Multiline

You can use the newline contsant to create multiline tooltips.

Code example:

mcBottomRight.onRollOver = function()
{
   tooltip.label = "Tooltip example " + newline;
   tooltip.label += "Positioning:" + newline + "Bottom right";
   tooltip.showTooltip();
}
mcBottomRight.onRollOut = function()
{
   tooltip.hideTooltip();
}

Note

The TextField used in the component expands automatically to adjust to the length of the text by setting the autosize property to true.

However, unless an extra SPACE character is added the last character will not be fully shown. To avoid this, the component automatically adds a SPACE character at the end of the text, but not before every newline character. In the example above awas therefore the string "Tooltip example " used, and not "Tooltip example", this way adding the extra SPACE.

Using HTML

The TextField used in the component does not automatically support HTML, but you can access it via the labelField property and set html to true.

Code example:

var tbTooltip:TextField = tooltip.labelField;
tbTooltip.html = true;

mcLeft.onRollOver = function()
{
 tooltip.label = "Positioning:" + newline + "Top left";
 tooltip.showTooltip();
}
mcLeft.onRollOut = function()
{
 tooltip.hideTooltip();
}

Custom Appearance

As you can access the TextField you cab also change its appearance using the various options Flash offers for formatting TextFields. Here is just one example:

Code example:

var tbTooltip:TextField = tooltip.labelField;
tbTooltip.html = true;
tbTooltip.backgroundColor = 0xFF0000;
tbTooltip.borderColor = 0xFFFFFF;
tbTooltip.textColor = 0xFFFFFF;

mcLeft.onRollOver = function()
{
 tooltip.label = "Top left ";
 tooltip.showTooltip();
}
mcLeft.onRollOut = function()
{
 tooltip.hideTooltip();
}

Using the Macromedia List Component

The following shows how to use the Tooltip Component on a List.
For each list item a object with several properties is created and stored as the item data.
The tooltip text then gets created using some of these properties.

Code example:

tooltip.delay = 0;
populateList();

function populateList()
{
 for (i = 0; i < 10; i++)
 {
 var listItem = new Object();
 //add some random properties
 listItem["id"] = "LI" + i;
 listItem["description"] = "This is item no " + i;
 listItem["name"] = "Item " + i;

 mcList.addItem(listItem["name"],listItem);
 }
}

var listListener = new Object();

listListener.itemRollOver = function(eventObj)
{
    var thisData = mcList.getItemAt(eventObj.index).data;
    //NOTE: we have to check if the data exists. Apparently the
    //list component adds a dummy item at the end that is shown
    //at the very bottom if the list is scrolled to the end.
    //If we don't perform the data check a tooltip will also be
    //displayed for that dummy item
    if (typeof thisData != "undefined")
    {
        tooltip.label = "ID: " + thisData.id + " " + newline;
        tooltip.label += thisData.description;
        tooltip.showTooltip();
    }
}

listListener.itemRollOut = function(eventObj)
{
tooltip.hideTooltip();
}
mcList.addEventListener("itemRollOver", listListener);
mcList.addEventListener("itemRollOut", listListener);

Using the Macromedia Tree Component

The following shows how to use the Tooltip Component on a Tree.
A full description of how this particular tree example is populated from XML can be found at
http://www.bgxcomponents.com/xmlSerialization.htm (see "Complex Tree and DataGrid example")

On this page only the code relevant to the tooltip is shown.

Code example:

tooltip.delay = 0;

treeListenerObject = new Object();

treeListenerObject.itemRollOver = function(evtObject){
    var tree = evtObject.target;
    var tNode = tree.getNodeDisplayedAt(evtObject.index);
    var thisData = tNode.attributes.data;
    if (typeof thisData.URL != "undefined")
    {
        tooltip.label = thisData.URL;
    }
    else
    {
        tooltip.label = "Section: " + thisData.label;
    }
    tooltip.showTooltip();
}

treeListenerObject.itemRollOut = function(evtObject){
    tooltip.hideTooltip();
}

bgxTree.addEventListener("itemRollOver", treeListenerObject);
bgxTree.addEventListener("itemRollOut", treeListenerObject);