Example of how to customize the hslider data tip style in flex gumbo

In the next flex gumbo, how does one customize the hslider data tip style through the skinclass style.

 

 The following is main. mxml:  <? XML version = "1.0" encoding = "UTF-8" ?>   <  S : Application   Name = "Spark_hslider_skinclass_datatip_test"           Xmlns : FX = Http://ns.adobe.com/mxml/2009"           Xmlns :S = "Library: // ns.adobe.com/flex/spark"           Xmlns : MX = "Library: // ns.adobe.com/flex/halo"  >         <  S : Hslider   ID = "Slider"               Skinclass = "Skins. customhsliderskin"               Horizontalcenter ="0"               Verticalcenter = "0"   />     </  S : Application  > 

 

 

 The following is the code for skins/customhsliderskin. mxml of the skin class:  <? XML version = "1.0" encoding = "UTF-8" ?>   <  S :Sparkskin   Name = "Customhsliderskin"           Xmlns : FX = Http://ns.adobe.com/mxml/2009"           Xmlns : S = "Library: // ns.adobe.com/flex/spark"           Minheight = "11"   Minwidth = "100"           Alpha .Disabled = "0.5"  >       <  S : States  >           <  S : State   Name = "Normal"   />           <  S : State  Name = "Disabled"   />       </  S : States  >         <  FX : Metadata  >           < ! [CDATA [[hostcomponent ("spark. components. hslider")] >       </  FX :Metadata  >         <  FX : Script  > /* Define the skin elements that shoshould not be colorized. for slider, the skin itself is colorized but the individual parts are not. */static private const exclusions: array = ["track", "Thumb"]; override public function get colorizeexclusions (): Array {return exclusions ;} </  FX : Script  >         < FX : Declarations  >       <! --- Defines the appearance of the slider's datatip. To mimize the datatip's appearance, create a custom hsliderskin class. -->           <  FX : Component   ID = "Datatip"  >              <  S : Mxmlcomponent   Minheight = "24"   Minwidth = "40"   Y = "-34"  >                 <  S : Rect   Top = "0"   Left = "0"   Right = "0"   Bottom = "0"  >                       <  S : Fill  >                           <  S : Solidcolor   Color = "Haloblue"   Alpha = "0.9"  />                       </  S :Fill  >                       <  S : Filters  >                           <  S : Dropshadowfilter   Angle = "90"   Color = "0x999999"   Distance = "3"  />                      </  S : Filters  >                   </  S : Rect  >                   <  S : Simpletext   ID = "Labelelement"   Text = "{Data }"                            Horizontalcenter = "0"   Verticalcenter = "1"                            Left = "5"   Right = "5"   Top = "5"   Bottom = "5"                            Textalign = "Center"   Verticalalign = "Middle"                           Fontweight = "Normal"   Color = "Black"   Fontsize = "11"   />               </  S : Mxmlcomponent  >          </  FX : Component  >       </ FX : Declarations  >         <! --- Defines the skin class for the hsliderskin's track. The default skin class is hslidertrackskin. -->       <  S : Button   ID = "Track"   Left = "0"   Right = "0"   Top ="0"   Bottom = "0"                 Skinclass = "Spark. Skins. Default. hslidertrackskin"   />       <! --- Defines the skin class for the hsliderskin's thumb. The default skin class is hsliderthumbskin. -->       <  S : Button   ID = "Thumb"   Top = "0"  Bottom = "0"   Width = "11"   Height = "11"                 Skinclass = "Spark. Skins. Default. hsliderthumbskin"   />     </  S : Sparkskin  >