Different tooltips for different parts of a component in Action Script - apache-flex

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