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&#8221;
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&#8221; 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>
Custom ToolTip

This snapshot give the panel as tooltip…

Advertisements

20 Responses to Create custom ToolTips components in flex.

  1. Website says:

    Is this normal that, attempting this piece of code on an AdvancedDataGrid, I get an empty Tooltip ?

  2. kumargandhi says:

    How r u getting the tooltip on the datagrid , cn u paste the sample code here , i will make a post with datagrid tooltip .

    regards,
    kumar.

  3. Mamtha says:

    This example is awesome! Thanks for posting it. I have a question can I add custom tooltip to an image? here is my code. All I want is different backgroundcolor. And also I need the tooltip to show up like an errortip like the one in your example.

    public function handleCountyList(event:ResultEvent):void{
    countylist = event.result as ArrayCollection;
    for(var k=1; k<=1; k++){
    for each(var c:Object in countylist){
    var imageProxy:Image=new Image();
    imageProxy.load(“1.png”);
    imageProxy.height=10;
    imageProxy.width=10;
    imageProxy.x=c.XVAL;
    imageProxy.y=c.YVAL;
    imageProxy.id=’image_’+k+’_’+c.COUNTYID;
    imageProxy.visible=true;
    imageProxy.toolTip = “{c.COUNTYDESC}”;
    imageProxy.tooltip.backgroundcolor=”{c.BGCLR}”;

    canvas1.addChild(imageProxy);
    }
    }
    }

  4. kumargandhi says:

    Hi
    For this kind we got to use the StyleManager Class and methods in it. Refer below line of code.

    StyleManager.getStyleDeclaration(“ToolTip”).setStyle(“backgroundColor”,”white”);

    [This will reflect to all the visible components in the App.]

    Like so according to the need. But here you got to add an EvenListener to the image so that on MouseOver the tooltip Backgroundcolor is changed. and again on the mouseOut it is set to the default , so that it does not reflect to other components.

    comment if you require the complete code, i will make a post on it.

    regards,
    kumar.

  5. white says:

    See this article for more information about this tooltip.

  6. Ajay says:

    Hi,
    I want to show custom tooltip of the top right corner of the component where i over the mouse. hw can i do as my code:
    private function createCustomTip(event:ToolTipEvent, body:String):void {
    ctt= new CustomTooltip();
    ctt.bodyText = body;
    event.toolTip = ctt;
    }
    and the component is :
    and i have been written for position but it is not working:
    private function positionTooltip(event:ToolTipEvent):void{
    var tt:ToolTip = event.toolTip as ToolTip;
    tt.x = imgTransition.x;
    tt.y = imgTransition.y +tt.height;

    }
    please help me as soon as possible
    thanks and regards
    ajay

    • kumargandhi says:

      Hi Ajay,

      For this kind we got to use the ToolTipManager Class.I will Mail you an example,hope it helps you.

      regards,
      kumar.

      • Arun says:

        Hi Kumar,
        I am stuck in the same issue which Ajay has reported. Could you please help with providing the solution?

        Thanks,
        Arun

      • Kuma says:

        I am stuck on using both create custom tip and position it too. Would you pls send me the code as well? Thanks!

  7. Jolene says:

    Hi Kumar,

    I have my Action Script (smallBox) file – just having draw shapes and event listener codes , The question is how do i expend my toolTip width in the mxml file? Or i need to write something in my AS file as well?
    Thank you.

  8. Jolene says:

    sorry whyy cant i include the mxml codes this comment box ?

    as below :

  9. Sagar says:

    Hi Kumar,

    I have a Vbox in which i create dynamically Combo box when a button is clicked. I want to add tool tip in drop down list and also on the selected item. Tha data provider for combo box is an Array Collection.
    Thanks in anticipation. Also, you are doing really nice work.. 🙂

    ~Sagar

  10. Steve says:

    Hi All.

    Just as a side note to save anyone else the head scratching, unless toolTip=” ” is explicit, the tooltip panel will not appear. toolTip =”” won’t show anything.

    As with testing all new components that I consider using in my apps I create a test app that only uses the component; this one had me stumpped for a while because there was no popup tooltip panel.

    There is a *lot* of scope for customisation so GREAT WORK Kumar.

    Steve

  11. kumargandhi says:

    Hi,

    Thanks for the note.I didn’t had much time in the beginning for explaining these, but thanks to you.

    regards,
    kumar.

  12. Not that I’m impressed a lot, but this is a lot more than I expected when I stumpled upon a link on Delicious telling that the info here is awesome. Thanks.

  13. Sankara narayanan says:

    Thanks a lot.
    Helped me great.
    Regards,
    Sankara narayanan Ekambaranathan.

  14. abhishek says:

    send me sample for add link in custom tooltip where user can click in it
    🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: