title: Use Tooltips in sparkskin
body: <p>I'm developing with Flex 4 and have a problem with tooltips in skins.</p>
  
  <p>I want to define the tooltip behavior of a textinput in the skin (or other components).</p>
  
  <p>I create a new skin and try to add a tooltip attriute to 
  the <code>&lt;s:sparkskin&gt;</code> directly and to the <code>&lt;s:RichEditableText&gt;</code></p>
  
  <p>but the tooltips don't show up.</p>
  
  <ul>
  <li>First: Is it possible to define tooltip in skins? If not, why?</li>
  <li>Second: If it's possible, why doesn't it works</li>
  </ul>
  
  <p>Thanks for your help</p>
  
  <p><strong>Tooltip work when Textinput is enable, but not when disable</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"&gt;
  &lt;fx:Declarations&gt;
      &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;     
  &lt;/fx:Declarations&gt;
  
  &lt;fx:Style&gt;
      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/mx";
  
      s|TextInput.withToolTip
      {
          skin-class:  ClassReference("skins.TextInputToolTipSkin");
      }       
  &lt;/fx:Style&gt;
  
  &lt;s:layout&gt;
      &lt;s:VerticalLayout /&gt;
  &lt;/s:layout&gt;
  
  &lt;s:TextInput styleName="withToolTip" enabled="true" /&gt;
  &lt;s:TextInput styleName="withToolTip" enabled="false" /&gt;
  &lt;/s:Application&gt;
  </code></pre>
  
  <p><strong>My Skin</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" blendMode="normal"
  toolTip="Tooltip Test on Skin"&gt;
  
  &lt;fx:Metadata&gt;
  &lt;![CDATA[ 
      /** 
       * @copy spark.skins.spark.ApplicationSkin#hostComponent
       */
      [HostComponent("spark.components.TextInput")]
  ]]&gt;
  &lt;/fx:Metadata&gt; 
  
  &lt;fx:Script fb:purpose="styling"&gt;
      private var paddingChanged:Boolean;
  
      /* Define the skin elements that should not be colorized. */
      static private const exclusions:Array = ["background", "textDisplay"];
  
      /**
       * @private
       */   
      override public function get colorizeExclusions():Array {return exclusions;}
  
      /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
      static private const contentFill:Array = ["bgFill"];
  
      /**
       *  @private
       */
      override public function get contentItems():Array {return contentFill};
  
      /**
       *  @private
       */
      override protected function commitProperties():void
      {
          super.commitProperties();
  
          if (paddingChanged)
          {
              updatePadding();
              paddingChanged = false;
          }
      }
  
      /**
       * @private
       */
      override protected function initializationComplete():void
      {
          useChromeColor = true;
          super.initializationComplete();
      }
  
      /**
       *  @private
       */
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
          if (getStyle("borderVisible") == true)
          {
              border.visible = true;
              shadow.visible = true;
              background.left = background.top = background.right = background.bottom = 1;
              textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
          }
          else
          {
              border.visible = false;
              shadow.visible = false;
              background.left = background.top = background.right = background.bottom = 0;
              textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
          }
  
          borderStroke.color = getStyle("borderColor");
          borderStroke.alpha = getStyle("borderAlpha");
  
          super.updateDisplayList(unscaledWidth, unscaledHeight);
      }
  
      /**
       *  @private
       */
      private function updatePadding():void
      {
          if (!textDisplay)
              return;
  
          // Push padding styles into the textDisplay
          var padding:Number;
  
          padding = getStyle("paddingLeft");
          if (textDisplay.getStyle("paddingLeft") != padding)
              textDisplay.setStyle("paddingLeft", padding);
  
          padding = getStyle("paddingTop");
          if (textDisplay.getStyle("paddingTop") != padding)
              textDisplay.setStyle("paddingTop", padding);
  
          padding = getStyle("paddingRight");
          if (textDisplay.getStyle("paddingRight") != padding)
              textDisplay.setStyle("paddingRight", padding);
  
          padding = getStyle("paddingBottom");
          if (textDisplay.getStyle("paddingBottom") != padding)
              textDisplay.setStyle("paddingBottom", padding);
      }
  
      /**
       *  @private
       */
      override public function styleChanged(styleProp:String):void
      {
          var allStyles:Boolean = !styleProp || styleProp == "styleName";
  
          super.styleChanged(styleProp);
  
          if (allStyles || styleProp.indexOf("padding") == 0)
          {
              paddingChanged = true;
              invalidateProperties();
          }
      }
  &lt;/fx:Script&gt;
  
  &lt;fx:Script&gt;
      &lt;![CDATA[
      /** 
       * @private 
       */     
      private static const focusExclusions:Array = ["textDisplay"];
  
      /**
       *  @private
       */
      override public function get focusSkinExclusions():Array { return focusExclusions;};
      ]]&gt;
  &lt;/fx:Script&gt;
  
  &lt;s:states&gt;
      &lt;s:State name="normal"/&gt;
      &lt;s:State name="disabled"/&gt;
  &lt;/s:states&gt;
  
  &lt;!-- border --&gt; 
  &lt;!--- @private --&gt;
  &lt;s:Rect left="0" right="0" top="0" bottom="0" id="border"&gt;
      &lt;s:stroke&gt;     
          &lt;!--- @private --&gt;
          &lt;s:SolidColorStroke id="borderStroke" weight="1" /&gt;
      &lt;/s:stroke&gt;
  &lt;/s:Rect&gt;
  
  &lt;!-- fill --&gt;
  &lt;!--- Defines the appearance of the TextInput component's background. --&gt;
  &lt;s:Rect id="background" left="1" right="1" top="1" bottom="1"&gt;
      &lt;s:fill&gt;
          &lt;!--- @private Defines the background fill color. --&gt;
          &lt;s:SolidColor id="bgFill" color="0xFFFFFF" /&gt;
      &lt;/s:fill&gt;
  &lt;/s:Rect&gt;
  
  &lt;!-- shadow --&gt;
  &lt;!--- @private --&gt;
  &lt;s:Rect left="1" top="1" right="1" height="1" id="shadow"&gt;
      &lt;s:fill&gt;
          &lt;s:SolidColor color="0x000000" alpha="0.12" /&gt;
      &lt;/s:fill&gt;
  &lt;/s:Rect&gt;
  
  &lt;!-- text --&gt;
  &lt;!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay --&gt;
  &lt;s:RichEditableText id="textDisplay"
            verticalAlign="middle"
            widthInChars="10"
            fontStyle.disabled="italic"
            left="1" right="1" top="1" bottom="1" 
            toolTip="ToolTip Test on Editor"/&gt;
  
  &lt;/s:SparkSkin&gt;
  </code></pre>