In Flex 4.5, how to add a toolTip to an InlineGraphicElement inside a TextFlow (TLF) using ActionScript (not MXML)?

Question

var newParagraph : ParagraphElement = new ParagraphElement();

var icon : InlineGraphicElement = MY_ICON;
//   icon.toolTip = "boo"  ????
newParagraph.addChild( icon );

I want a specific toolTip for "icon". I have read about using HTML and rollOver and rollOut (e.g. Thanks, Mister), but I'm building this as part of a larger text block; it's difficult to switch from incremental objects to HTML in the middle.

If I cannot set an event on the icon, can I create an HTML bit in ActionScript as part (but not all) of a paragraph ?

Cheers

Answer 1

I just came across the same problem.

The easiest solution i found was wrapping my InlineGraphicElement in a LinkElement.

The LinkElement already dispatches mouse events.

Answer 2

The problem (as I'm sure you found out) is that text flow elements are not display objects, and so do not implement the normal display object behavior.

What you need to do is create a custom InlineGraphicElement that attaches the event listeners you need, then dispatch an event off of the textFlow instance so it can be read in somewhere in your display object hierarchy (or whatever your method of choice is to target that event).

You can see a good example of how to add mouse interaction by looking at the source to the LinkElement (see the createContentElement function).

Unfortunately the InlineGraphicElement is marked final, so you will need to duplicate it's functionality rather then extend it. Just make sure to use the custom graphic element in your code in lieu of the normal one.

Best of luck!

edit

Just in case the point was lost, the idea is that you can capture the mouse event somewhere in your app by attaching a listener to the textFlow, then programmatically create and position a tool tip over the element using the standard methods to find the bounds of a text flow element.

Answer 3

You can do some hit-testing when the mouse is over the textflow component.

Suppose you have some textflow like this:

<s:RichEditableText width="100%" height="100%" mouseOver="toggleTooltip()">
    <s:textFlow>
        <s:TextFlow>
            <s:p>
                <s:span>Some text before</s:span>
                <s:img id="myImg" source="myImg.png" />
                <s:span>Some text after</s:span>
            </s:p>
        </s:TextFlow>
    </s:textFlow>
</s:RichEditableText>

And you listen for mouseOver events on the entire textcomponent.

Then to test if the mouse is over your image, implement the mouseOver handler:

private function toggleTooltip():void {
    var graphic:DisplayObject = myImg.graphic;
    var anchor:Point = graphic.localToGlobal(new Point(0, 0));

    if (mouseX >= anchor.x && mouseX <= anchor.x + graphic.width &&
        mouseY >= anchor.y && mouseY <= anchor.y + graphic.height) 
    {
        trace('show tooltip');
    }
    else {
        trace('hide tooltip');
    }
}