Create custom ToolTips components in flex.
The default tooltip component in flex is Text ,so to change this we have to define a component which implements
1.Here iam using panel as my tooltip component and the code contains simple the set and get methods as below..
ToolTipComponents/PanelToolTip.mxml
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml”
implements=”mx.core.IToolTip”
width=”200″
alpha=”.8″
borderThickness=”2″
backgroundColor=”white”
dropShadowEnabled=”true”
borderColor=”black”
borderStyle=”solid”
shadowDistance=”10″ shadowDirection=”right”>
<mx:Script><![CDATA[
[Bindable]
public var bodyText:String = “”;
// Implement required methods of the IToolTip interface; these
// methods are not used in this example, though.
public var _text:String;
public function get text():String {
return _text;
}
public function set text(value:String):void {
}
]]></mx:Script>
<mx:Text text=”{bodyText}” percentWidth=”100″/>
</mx:Panel>
and the app code looks like this..
2.
<?xml version=”1.0″ encoding=”utf-8″?>
<!– customtooltip.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script><![CDATA[
import ToolTipComponents.PanelToolTip;
import mx.events.ToolTipEvent;
private function createCustomTip(title:String, body:String,
event:ToolTipEvent):void {
var ptt:PanelToolTip = new PanelToolTip();
ptt.title = title;
ptt.bodyText = body;
event.toolTip = ptt;
}
]]></mx:Script>
<mx:Button id=”b2″
label=”Generate”
toolTip=” “
toolTipCreate=”createCustomTip(’GENERATE’,'Click this button to generate the report.’, event)”
x=”269″ y=”170″/>
<mx:Button id=”b1″
label=”Delete”
toolTip=” “
toolTipCreate=”createCustomTip(’DELETE’,'Click this button to delete the report.’, event)”
x=”405″ y=”170″/>
<mx:Button id=”b3″
label=”Stop”
toolTip=”Click this button to stop the creation of the report.
This button uses a standard ToolTip style.”
x=”528″ y=”170″/>
</mx:Application>
This snapshot give the panel as tooltip…
