Nick -
Great example!
One question. I've used your example to implement a custom tooltip on a
component that also contains a pie chart. The pie chart has a tooltip as
well.
Is there any way to temporarily disable to component's overall tooltip
while the pie chart tooltip is displaying - thereby avoiding the dreaded
"battle of the tooltips".
- Tom
n51red wrote:
>
> 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
> <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
> <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
> <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/
