BGX Tooltip Component (Flash MX 2004) : Usage examples

Overview

• Positioning
• Multiline
• Customizing Appearance
  • using HTML
  • using TextField properties
  • using the TextFormat Class
• Using Word Wrap
• Using the Macromedia List Component
• Using the Macromedia Tree Component
• Creating a Tooltip instance using the DepthManager Class

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();
}

back to top

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();
}

back to top

Customizing Appearance

The Bgx Tooltip component dynamically inserts and positions a standard TextField. It also allows you to access this TextField and apply any formatting or other options that Flash provides for TextFields.

Below are some examples showing how to apply formatting using HTML, TextField properties or the TextFormat Class)

back to top

Customizing Appearance (using HTML)

The component contains a html property that specifies if the TextField used to display the tooltip shal support HTML or not. In the following example html is set to true.

Code example:

tooltip.html = true;

mcLeft.onRollOver = function()
{
    tooltip.label = "Positioning:" + newline + "<font face='Times New Roman'><b>Top left</b></font>";
    tooltip.showTooltip();
}
mcLeft.onRollOut = function()
{
    tooltip.hideTooltip();
}

back to top

Customizing Appearance (using TextField properties)

As you can access the TextField you can also change its appearance using the various options Flash offers for formatting TextFields. Here is one example of how to change the colors used for the tooltip:

Code example:

tooltip.html = true;

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

back to top

Customizing Appearance (using the TextFormat Class)

As you can access the TextField used to display the tooltip you can also change its appearance using the various options Flash offers for formatting TextFields. Here is an example of how to change font type, size and style using the TextFormat Class.

Code example:

var tbTooltip:TextField = tooltip.labelField;
var my_fmt = new TextFormat();
my_fmt.bold = true;
my_fmt.size = 16;
my_fmt.underline = true;
my_fmt.font = "Comic Sans MS";

tbTooltip.setNewTextFormat(my_fmt);

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

back to top

Using Word Wrap

You can define a wrap length in pixels to which long strings are wrapped automatically (also HTML text). If the label text is shorter than the defined wrapLength the toolbar auto-sizes to the width of the text.

If you set wordWrap to false the TextField will always autosize to the width of the longest line in the label text.

In the following example the upper hotspot shows the text wrapped at a width of 300 pixels, the middle hotspot shows the display of a short string with the same settings while the lower one shows the tooltip without word wrap.

Code example:

var longString:String = "The <b>BGX Tooltip Component</b>displays a 
		tooltip above assigned objects like buttons, list entries, hotspots etc. 
		It automatically positions the text next to the mouse, adjusting 
		it so that it will not fall outside the boundaries of the stage."
var shortString:String = "Short text."
tooltip.html = true;

mcTop.onRollOver = function()
{
	tooltip.wordWrap = true;
	tooltip.wrapLength = 300;
	tooltip.label = longString;
	tooltip.showTooltip();
}
mcTop.onRollOut = function()
{
	tooltip.hideTooltip();
}

mcMiddle.onRollOver = function()
{
	tooltip.wordWrap = true;
	tooltip.wrapLength = 300;
	tooltip.label = shortString;
	tooltip.showTooltip();
}
mcMiddle.onRollOut = function()
{
	tooltip.hideTooltip();
}

mcBottom.onRollOver = function()
{
	tooltip.wordWrap = false;
	tooltip.label = longString;
	tooltip.showTooltip();
}
mcBottom.onRollOut = function()
{
	tooltip.hideTooltip();
}

back to top

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);

back to top

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 using the Bgx Serialization classes can be found at 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;
    tooltip.label = "";
    if (typeof thisData.URL != "undefined")
    {
        tooltip.label = thisData.URL;
    }
    else if (typeof thisData.label != "undefined")
    {
        tooltip.label = "Section: " + thisData.label;
    }
    //the following is necessary because the Tree component
    //triggers also events when rolling over rows that don't
    //show data
    if (tooltip.label != "") tooltip.showTooltip();
}

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

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

back to top

Creating a Tooltip instance using the DepthManager Class

The buit-in DepthManager Class lets you manage reserved depths in a special highest-depth clip on _root for system-level services such as the cursor or tooltips. It includes a specific property DepthManager.kTooltip which defines the level reserved for tooltips.

To create a BgxTooltip instance on that DepthManager.kTooltip level, first make sure that you have an instance of the BgxTooltip component in the library, then use something like the following:

import mx.managers.DepthManager;

tooltip = DepthManager.createClassObjectAtDepth(bgx.BgxTooltip, DepthManager.kTooltip,{displayTime:36,delay:0});

btn.onRollOver = function()
{
	tooltip.label ="test";
	tooltip.showTooltip();
}

back to top

For further information please contact info@bgxcomponents.com.