Hello,
Somebody asked me to provide an example of how to use arbirary
components as tool tips. So here goes:
Notes
-----
For a component to be used as a tooltip it must implement the IToolTip
interface. I've used a base class ("CustomToolTip") for the custom
tooltips in this example that takes care of implementing the interface,
and a few other things as documented within the code.
Just like when using standard tooltips, you need to set the toolTip
property of a component for a tooltip to be displayed for it. This is
true even if you don't actually use the value in your tooltip
component. That's why I set the toolTip variables to " " in the example.
When a tooltip is to be displayed for a component, that component fires
a toolTipCreate event. To use your custom tooltip component you need to
intercept this event and set its toolTip property to an instance of
your custom tooltip component.
The main application code
-------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
verticalGap="20">
<mx:Script>
<![CDATA[
import mx.events.*;
import CustomToolTips.*;
]]>
</mx:Script>
<mx:Label text="Component1" id="Component1" toolTip=" "
toolTipCreate="event.toolTip=new Component1ToolTip();"/>
<mx:Button label="Component2" id="Component2" toolTip=" "
toolTipCreate="event.toolTip=new Component2ToolTip();"/>
</mx:Application>
A base class for components to be used as tooltips
--------------------------------------------------
package CustomToolTips
{
import mx.core.*;
import mx.containers.*;
public class CustomToolTip extends VBox implements IToolTip
{
public function CustomToolTip()
{
// Make the ToolTip invisible to the mouse so
that it doesn't
// interfere with the ToolTipManager's mouse-
tracking.
mouseEnabled = false;
mouseChildren=false;
//Add padding to prevent the component from
//touching the sides of the application, which
//looks untidy
setStyle("paddingBottom", 10);
setStyle("paddingRight", 10);
}
//IToolTip functions - unused in this case
public function get text():String { return null; }
public function set text(value:String):void {}
}
}
A couple of custom tooltips extending the above class
-----------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<ctt:CustomToolTip xmlns:mx="http://www.adobe.com/2006/mxml";
xmlns:ctt="CustomToolTips.*"
width="150"
backgroundColor="#FFAAAA" dropShadowEnabled="true"
borderColor="black" borderThickness="1" borderStyle="solid">
<mx:Label text="Custom Tooltip 1" fontSize="14"
fontWeight="bold"/>
<mx:Text text="This is the custom tooltip for component 1"
width="100%"/>
</ctt:CustomToolTip>
<?xml version="1.0" encoding="utf-8"?>
<ctt:CustomToolTip xmlns:mx="http://www.adobe.com/2006/mxml";
xmlns:ctt="CustomToolTips.*"
width="225"
backgroundColor="white" dropShadowEnabled="true"
borderColor="black" borderThickness="1" borderStyle="solid">
<mx:Label text="Custom Tooltip 2" fontSize="14"
fontWeight="bold" color="blue"/>
<mx:Text text="This is the custom tooltip for component 2"
width="100%"/>
</ctt:CustomToolTip>
Regards,
Nick
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/flexcoders/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
