3 Replies Latest reply on Sep 3, 2010 4:38 AM by betheflexcoder

    Tooltip delay in custom list component

    Karthik@Chennai

      Hi All,

      I have extended the List box component for displaying  list item label which exceeds list width as tooltip text during mouse over event.herewith i have specified the code logic which delays tooltip on  most cases.

       

      Note :Iam same delay for Custon Tree component but not for custom Grid component

       

      package TTList
      {
      import TT.utils.StringFunctions;

       

      import mx.collections.*;
      import mx.controls.List;
      import mx.events.ListEvent;

       

      public class TTList extends List
      {
       
        public function TTList()
        {
         super();
         this.addEventListener(ListEvent.ITEM_ROLL_OVER, createToolTipHandler);
         this.addEventListener(ListEvent.ITEM_ROLL_OUT, destroyToolTipHandler);
        }

      // function to show tooltip for the item in list on mouse rollover
        private function createToolTipHandler(event:Object):void
        {  
         var actualStringLength:Number = ((event.itemRenderer).listData.label).length; 
        
         if(((this.width/5) - 12) < actualStringLength)
         {
          this.toolTip = StringFunctions.lTrim((event.itemRenderer).listData.label);
         }
        }

      // function to clear tooltip for the item in list on mouse rollout
        private function destroyToolTipHandler(event:Object):void
        {
         this.toolTip = "";
        }

      }

       

      Tree

      -------

      // function to show tooltip for the item in tree on mouse rollover
        private function createToolTipHandler(event:Object):void
        { 
         depth = event.itemRenderer.listData.depth;
               // Each character need 5 pixel to display and each level(depth) is equal to tab space (5 characters)
         // so (width (In pixels) / 5) gives no of characters can be displayed and
         // (depth * 5) gives no of charecters for tab space
            if((this.width/5) < ((depth * 5) + (event.itemRenderer.listData.label.length)))
               {
                this.toolTip = event.itemRenderer.listData.label;
               }
            
        }
       
        // function to remove tooltip for the item in tree on mouse rollout
        private function destroyToolTipHandler(event:Object):void
        {
         this.toolTip = "";
        }

       

      Grid

      ------

      // function to show tooltip for the item in grid on mouse rollover
        private function createToolTipHandler(event:Object):void
        {
         var rendererName:String = event.itemRenderer.name;
         var itemName:String = rendererName.substr(0,20);
         //this is check to be made to avoid error, if itemrenderer is used in grid 
         if(itemName == "DataGridItemRenderer")
         {
          // here 6 represents the assumption value.
          if(((this.columns[(DataGridItemRenderer(event.itemRenderer).listData).columnIndex].width) /6) < ((DataGridItemRenderer(event.itemRenderer).listData.label).length))
          {   
           this.toolTip = DataGridItemRenderer(event.itemRenderer).listData.label;
          }
         
         }
         
        }
       
        // function to clear tooltip for the item in grid on mouse rollout
        private function destroyToolTipHandler(event:Object):void
        {
         this.toolTip = "";
        }

       

      regards,

      karthik