Question

I want to have a tooltip that shows different things when the mouse goes over a different part of a component. For example if it is the top half of a component it will show one tooltip. If the mouse is on the bottom half of the segment then the tooltip will be another. I have some code I have written that returns a panel with string in. This code is on another computer so I’ll post code tomorrow.

Is it possible in ActionScript to have different tooltips (or rather differnt values in a tooltip) for different parts of a segment?

The code I have so far is:

MyToolTip.mxml

<?xml version="1.0"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.core.IToolTip" 
alpha=".9" width="325" borderColor="black" borderStyle="solid"
cornerRadius="10" horizontalAlign="center">
<mx:Script><![CDATA[
[Bindable]
public var toolTipText:String = "";

public var _text:String;
[Bindable]
public function get text():String { return _text; } 
public function set text(value:String):void {}
]]></mx:Script>

<mx:HBox width="100%" height="100%">
<mx:Text text = "Text here" width = "50%"/>
<mx:Text text = "{toolTipText}" width = "50%"/>
</mx:HBox>  
</mx:Panel>

And then my action script class component that I want the tooltip to be against.

public class MyComponent extends mx.containers.VBox {

    private var tt:MyToolTip 

    public function MyComponent() {
        this.addEventListener(ToolTipEvent.TOOL_TIP_CREATE, toolTipCreateHandler);
        this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
        tt = new MyToolTip();
    }

    override protected function drawFigure():void {
        //Need to kick the TOOL_TIP_CREATE event...and needs to be a value (eg a SPACE). 
        //If blank then no tooltip is created 
        this.toolTip = " ";
        super.drawFigure();
    }

    private function toolTipCreateHandler(event:ToolTipEvent):void {
        var toolTipText:String = "tooltip1";
        eventToolTip.toolTipText = toolTipText;
        event.toolTip = tt;
    }

    private function mouseOverHandler(event:MouseEvent):void {
        //perhaps I need to be more efficient here and only fire
        //when the mouse goes into top half or bottom half
        //This does not appear to update the toolTipText in the view
        var halfwayUp:Number = getBounds(this).height  / 2;
        if (event.localY < halfwayUp) {
            eventToolTip.toolTipText = "tooltip2";
        }
        else {
            eventToolTip.toolTipText = "tooltip1";
        }           
    }
}
}

Any help or pointers in how to update the tooltip when it is already displaying would be great.

Answer 1

Yes, its possible, the trick is to know how tooltips work:
Tooltips get created, if you mouse over a component, and are destroyed if you mouse out. So if you change the text on a tooltip while its displayed, then you wont see the change, because the set toolTip() function does not creates a new tooltip, if one already exists. So the solution is to destroy the currently showing tooltip, and make a new one. To destroy a tooltip, you can set its value to an empty string.
Here is a sample code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
mouseMove="application1_mouseMoveHandler(event)">
<mx:Script>
<![CDATA[
    import mx.managers.ToolTipManager;

    protected function application1_mouseMoveHandler(event:MouseEvent):void{
        if (mouseX < 100) {
            testButton.toolTip = ""
            testButton.toolTip = "on the left side";
        } else {
            testButton.toolTip = ""
            testButton.toolTip = "on the right side";

        }
    }

]]>
</mx:Script>
<mx:Button id="testButton" label="test" width="200" height="200" />
</mx:Application>

Note: If you want to mess more with tooltips in Flex, you can get the current tooltip with ToolTipManager.currentToolTip (and modify its properties without destroying it).