11 Replies Latest reply on Aug 16, 2011 9:08 AM by r4raghs

    How to put the html text in Tooltip?

    Jessie_Meta

      Hi all,

       

      May i know how to display the html text using Tooltip?

       

      Thanks.

       

       

      Regards,

      Jessie

        • 2. Re: How to put the html text in Tooltip?
          Kanchan Ladwani Level 2

          Hello Jessie,

           

            here is the code for it

          Main.mxml

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
              <mx:Button x="266" y="214" label="Button" id="Btn" mouseOver="init(event)"  />
              <fx:Script>
                  <![CDATA[
                      import com.Htmltip;           
                      import mx.controls.Alert;
                      import mx.controls.ToolTip;
                      import mx.managers.ToolTipManager;
                     
                      public  function init(evt:MouseEvent):void{               
                      ToolTipManager.toolTipClass=Htmltip;          //Htmltip is action script class
                      var tip2:String;
                      tip2 = "<font color='#076baa' size='+4'><b>Quickly format your tooltips:</b></font><br><br>";
                      tip2 += "<b>Create lists:</b> <li>item 1</li><li>item 2</li><br>";           
                      tip2 += "<b>Align your text:</b><br>";
                      tip2 += "<p align='left'>Left aligned text</p>";
                      tip2 += "<p align='right'>Right aligned text</p>";
                      tip2 += "<p align='center'>Centered text</p>";
                      Btn.toolTip=tip2;          
                      }       
                  ]]>
              </fx:Script> 
          </s:Application>


          Action script class

           

          package com
          {
              import mx.controls.Text;
              import mx.controls.ToolTip;
                     
              public class Htmltip extends ToolTip
              {
                  public function Htmltip()
                  {    super(); }
                 
                  override protected function commitProperties():void{
                      super.commitProperties();
                      textField.htmlText=text;           
                  }
              }
          }

           

          Thanks and Regards,

          ---------------------------------------------------------------------- ----------------------------

          Kanchan Ladwani | kladwani@infocepts.com | www.infocepts.com

          ---------------------------------------------------------------------- ----------------------------

          • 3. Re: How to put the html text in Tooltip?
            Jessie_Meta Level 1

            Hi r4raghs & Kanchan Ladwani, thanks for the help.

             

            Kanchan Ladwani, i alr tried your example but I got an error (Parse error at '<font>').

            The different thing is I'm using MXML Component NOT MXML Application but why the code can't working in MXML Component???
            Regards,
            Jessie
            • 4. Re: How to put the html text in Tooltip?
              r4raghs Level 1

              you can follow the link i have provided to get tooltip in custom component.

              • 5. Re: How to put the html text in Tooltip?
                Jessie_Meta Level 1

                Hi r4raghs,

                 

                I already followed the link that you have provided but not successful. It will come out with the error (Parse error at '<strong>'.)

                 

                The different thing is I'm using MXML Component NOT MXML Application but why the code can't working in MXML Component???

                 

                 

                Regards,

                 

                Jessie

                • 6. Re: How to put the html text in Tooltip?
                  Kanchan Ladwani Level 2

                  Hi Jessie,

                   

                    I tried same code with MXML component as well its not giving me any such error,working as expected in both FB3 & FB4

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
                      <mx:Button x="266" y="214" label="Button" id="Btn" mouseOver="init(event)"  />
                      <fx:Script>
                          <![CDATA[
                              import com.Htmltip;           
                              import mx.controls.Alert;
                              import mx.controls.ToolTip;
                              import mx.managers.ToolTipManager;
                             
                              public  function init(evt:MouseEvent):void{               
                                  ToolTipManager.toolTipClass=Htmltip;
                                  var tip2:String;
                                  tip2 = "<font color='#076baa' size='+4'><b>Quickly format your tooltips:</b></font><br><br>";
                                  tip2 += "<b>Create lists:</b> <li>item 1</li><li>item 2</li><br>";           
                                  tip2 += "<b>Align your text:</b><br>";
                                  tip2 += "<p align='left'>Left aligned text</p>";
                                  tip2 += "<p align='right'>Right aligned text</p>";
                                  tip2 += "<p align='center'>Centered text</p>";
                                  Btn.toolTip=tip2;          
                              }       
                          ]]>
                      </fx:Script>
                  </s:Group>

                    i guess there is some other issue,could u pls paste code snippet?? so that we can work on it

                   

                  Thanks and Regards,

                  ---------------------------------------------------------------------- ----------------------------

                  Kanchan Ladwani | kladwani@infocepts.com | www.infocepts.com

                  ---------------------------------------------------------------------- ----------------------------

                  • 7. Re: How to put the html text in Tooltip?
                    EvyatarBH Level 3

                    I suggest to read the following -

                    http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html

                     

                    You can scroll to the section named "Implementing the IToolTip interface"

                    Their example seems like exactly what you are looking for and I implemented it successfully, but with some important differences -

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
                               xmlns:s="library://ns.adobe.com/flex/spark" 
                               xmlns:mx="library://ns.adobe.com/flex/mx"
                               implements="mx.core.IToolTip" backgroundColor="#F9F9DD"
                               width="{textContent.width+5}" height="{textContent.height+5}" alpha="0.95"
                               skinClass="com.xxx.yyy.zzz.skin.PanelWithoutTitleSkin">
                    
                         <fx:Script>
                              <![CDATA[
                                   import com.xxx.yyy.zzz.skin.PanelWithoutTitleSkin;
                                   
                                   import flashx.textLayout.conversion.TextConverter;
                                   
                                   import mx.core.IToolTip;
                                   
                                   [Bindable]
                                   public var bodyText:String;
                                   
                                   public var _text:String;
                                   
                                   private static var _toolTipInstance:PanelToolTip;
                                   
                                   public function get text():String{
                                        return _text;
                                   }
                                   
                                   public function set text(value:String):void{
                                        
                                   }
                                   
                                   public static function getInstance(toolTipText:String):PanelToolTip{
                                        if(_toolTipInstance==null){
                                             _toolTipInstance = new PanelToolTip();
                                        }
                                        _toolTipInstance.bodyText = toolTipText;
                                        return _toolTipInstance;
                                   }
                    
                              ]]>
                         </fx:Script>
                    
                         <s:RichText id="textContent" paddingLeft="4" paddingTop="2" backgroundAlpha="0" 
                              textFlow="{TextConverter.importToFlow(bodyText,TextConverter.TEXT_FIELD_HTML_FORMAT)}" 
                              />
                    </s:Panel>
                    

                    • 8. Re: How to put the html text in Tooltip?
                      Jessie_Meta Level 1

                      Thanks EvyatarBH & Kanchan Ladwani for your replied.

                       

                      I'm using flex 4.5 with flex SDK Flex3.6. Below is my sample code with the error (Access of undefined property Htmltip).

                       

                       

                       


                      Test.mxml (MXML Component)

                       

                      <?xml version="1.0" encoding="utf-8"?>


                      <mx:Canvas
                      xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">

                       

                      <mx:Button x="266" y="214" label="Button" id="Btn" mouseOver="init(event)" />

                       

                      <mx:Script>

                      <![CDATA[

                      import com.Htmltip;

                      import mx.controls.Alert;

                      import mx.controls.ToolTip;

                      import mx.managers.ToolTipManager;


                      public function init(evt:MouseEvent):void{

                      ToolTipManager.toolTipClass=Htmltip;

                       

                      var tip2:String;

                      tip2 = "<font color='#076baa' size='+4'><b>Quickly format your tooltips:</b></font><br><br>";

                      tip2 += "<b>Create lists:</b> <li>item 1</li><li>item 2</li><br>";

                      tip2 += "<b>Align your text:</b><br>";

                      tip2 += "<p align='left'>Left aligned text</p>";

                      tip2 += "<p align='right'>Right aligned text</p>";

                      tip2 += "<p align='center'>Centered text</p>";

                       

                      Btn.toolTip=tip2;

                      }

                      ]]>

                      </mx:Script>

                       

                      </mx:Canvas>

                       

                       


                      Regards,

                       

                      Jessie

                      • 9. Re: How to put the html text in Tooltip?
                        Kanchan Ladwani Level 2

                        Hello,

                         

                        Htmltip is your actionscript class,make sure its in the folder named com.(u can chose any folder name just import it accordingly)

                        Htmltip.as

                        package com
                        {
                            import mx.controls.Text;
                            import mx.controls.ToolTip;
                                   
                            public class Htmltip extends ToolTip
                            {
                                public function Htmltip()
                                {    super(); }
                               
                                override protected function commitProperties():void{
                                    super.commitProperties();
                                    textField.htmlText=text;           
                                }
                            }
                        }

                         

                        Thanks and Regards,

                        ---------------------------------------------------------------------- ----------------------------

                        Kanchan Ladwani | kladwani@infocepts.com | www.infocepts.com

                        ---------------------------------------------------------------------- ----------------------------

                        • 10. Re: How to put the html text in Tooltip?
                          Jessie_Meta Level 1

                          Hi,

                           

                          I already put an actionscript class(Htmltip.as) in the folder named com BUT I still got the error (Parse error at '<font>').

                           

                          I really do not know why this will happen?

                           

                          Regards,

                           

                          Jessie

                          • 11. Re: How to put the html text in Tooltip?
                            r4raghs Level 1

                            prtscr.JPG

                             

                            Have change nothing with your code, works perfect.