4 Replies Latest reply on Sep 20, 2010 3:13 AM by simplesid

    styles for ToolTip in itemrenderer

    simplesid

      Hi,

      I have a normal itemrenderer (an mx:Label inside and hbox). I want to set my own style settings for the tooltip appearing on the label. I have tried giving the style description inside as well as outside the renderer. I have also tried two ways to style it (one by using ToolTip{} and the other by using my own .myToolTip{} ). But nothing seems to work. Can anyone please provide some help?

      Thanks in advance!

      Sid

        • 1. Re: styles for ToolTip in itemrenderer
          BhaskerChari Level 4

          Hi Sid,

           

          If you have used the Global component selector as you have used then it should work...

           

          Where have you included this style...Have you include it in the ItemRenderer itslef  or in the main mxml file by including the css file.

           

          ToolTip

          {

               color:#cfd3ae;

               cornerRadius:5;

               font-size:12;

          }

           

           

          Thanks,

          Bhasker

          • 2. Re: styles for ToolTip in itemrenderer
            simplesid Level 1

            Hi Bhasker,

            Thanks for your answer. My item renderer is not an external one. i have written it inside a datagrid column in the same mxml file. There is no CSS, the style is also written in the mxml only.

            Thanks!

            Sid

            • 3. Re: styles for ToolTip in itemrenderer
              BhaskerChari Level 4

              Hi Sid,

               

              Check this example which has a itemRenderer the way you mentioned. Try to mouseover on the EmpName coulmn in the DataGrid you will get the toolTip as per the style.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onDGCreationComplete();">
              <mx:Style>
                ToolTip
                {
                    color:#FFFFFF;
                    cornerRadius:10;
                    font-size:12;
                    background-color:#000000;     
                }

              </mx:Style>
                 <mx:Script>
                 <![CDATA[
                  import mx.controls.Alert;
                   
                    [Bindable]private var myAC:Array = [
                       {EmpId:1001, Ename:'Sid',  EmpDepartment:[{Id:1,Name:"IT"},  {Id:2,Name:"HARDWARE"},{Id:3,Name:"NETWORK"}]},
                       {EmpId:1002, Ename:'Bhasker',  EmpDepartment:[{Id:2,Name:"HARDWARE"}, {Id:1,Name:"IT"},{Id:3,Name:"NETWORK"}]},
                       {EmpId:1003, Ename:'Pavan',  EmpDepartment:[{Id:3,Name:"NETWORK"}, {Id:1,Name:"IT"},  {Id:2,Name:"HARDWARE"}]},
                       ];
                         
                 private function onDGCreationComplete():void
                 {
                   if(dataGrid.dataProvider == null || dataGrid.dataProvider.length == 0)
                   {
                    Alert.show("DataGrid is Empty.");
                   }
                 }
                 ]]>
                 </mx:Script>

              <mx:DataGrid id="dataGrid" dataProvider="{myAC}" x="10" y="177" visible="true">          
                <mx:columns>
                 <mx:DataGridColumn  headerText="SLNO" itemRenderer="mx.controls.RadioButton"/>           
                 <mx:DataGridColumn dataField="EmpId" headerText="Names" />           
                 <mx:DataGridColumn headerText="Passwords">
                  <mx:itemRenderer>
                   <mx:Component>
                    <mx:HBox>
                     <mx:Label text="{data.Ename}" toolTip="{data.Ename}" />
                    </mx:HBox>
                   </mx:Component>
                  </mx:itemRenderer>
                 </mx:DataGridColumn>
                 <mx:DataGridColumn headerText="CPasswords">
                  <mx:itemRenderer>
                   <mx:Component>
                    <mx:ComboBox dataProvider="{data.EmpDepartment}" labelField="Name"/>
                   </mx:Component>
                  </mx:itemRenderer>
                 </mx:DataGridColumn>
                </mx:columns>
              </mx:DataGrid>
              </mx:Application>

               

              Thanks,

              Bhasker

              • 4. Re: styles for ToolTip in itemrenderer
                simplesid Level 1

                Hi Bhasker,

                I have done the same thing as in your application. However I found out why it was not working. The ToolTip{} doesn't work in a component. It only works in an application. My datagrid is inside a component(Sorry i missed to mention that). Once i included the style in the application (and not the component) it worked!!

                Thanks for your time!

                Sid.