Advanced Flash Components

Adding a Tooltip

Updated: Jul 9, 2010 Views: 1423

Description: This tutorial will show you how to add a tooltip to the Thumbnail Grid component.

1. Drag an instance of the Thumbnail Grid component onto the Stage.

2. Create an XML file and add an additional attribute: tooltip, which will be used to store the tooltip's content.

<?xml version="1.0" encoding="utf-8"?>
<images>
     <item>
        <source>images/image1.jpg</source>
        <tooltip>Some text for the 1st image.</tooltip>
    </item>
    <item>
        <source>images/image2.jpg</source>
        <tooltip>Some text for the 2nd image.</tooltip>
    </item>
    <item>
        <source>images/image3.jpg</source>
        <tooltip>Some text for the 3rdimage.</tooltip>
    </item>
    <item>
        <source>images/image4.jpg</source>
        <tooltip>Some text for the 4thimage.</tooltip>
    </item>
    <item>
        <source>images/image5.jpg</source>
        <tooltip>Some text for the 5th image.</tooltip>
    </item>
</images>

3. Create a new symbol and inside the symbol draw a simple tooltip and add a dynamic text field that will display the title. Give the text field an instance name of "tooltipText" and move the tooltip so that bottom edge of the tooltip's arrow is positioned where the registration point of the symbol is.

4. After creating the tooltip, right click on it in the Library, chose Linkage, select Export for Actionscript and in the Class field write Tooltip. This step is necessary in order to be able to use the tooltip in the actionscript code.

5. The following code will attach the tooltip when you roll over an item and will remove it when you roll out.

import com.afcomponents.events.GridEvent;
import flash.events.MouseEvent;

// create an instance of the Tooltip
var tooltip:Tooltip = new Tooltip();

myGrid.addEventListener(GridEvent.ITEM_MOUSE_OVER, tooltipHandler);
myGrid.addEventListener(GridEvent.ITEM_MOUSE_OUT, tooltipHandler);
myGrid.addEventListener(GridEvent.ITEM_CLICK, itemClickHandler);

function itemClickHandler(event:GridEvent):void
{
     // event.index is the index of the clicked item
     // when an item is clicked, scroll to that item
     myGrid.select(event.index);
}

function tooltipHandler(event:GridEvent):void
{
     if (event.type == GridEvent.ITEM_MOUSE_OVER)
     {
           // event.data.title is the value of the title attribute added in the XML file
           addTooltip(event.data.tooltip);
     }
     else if (event.type == GridEvent.ITEM_MOUSE_OUT)
     {
           removeTooltip();
     }
}

function addTooltip(myText:String):void
{
     // add the tooltip to the stage
      addChild(tooltip);

     // set the text property of the tooltipText TextField to the value of the myText parameter
     tooltip.tooltipText.text = myText;

     // when the mouse moves, move the tooltip
     stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}

function removeTooltip():void
{
     // remove the listener
      stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

     // remove the tooltip instance from stage
     removeChild(tooltip);
}

function mouseMoveHandler(event:MouseEvent):void
{
      tooltip.x = mouseX;
      tooltip.y = mouseY;
}

AFComponents.com