1 Reply Latest reply on Aug 2, 2011 12:41 AM by Vibhuti Gosavi(InfoCepts)

    How to add a tooltip to spark Panel title?

    Numinos X

      I guess the question says it all : )

       

      But still — I'm using a slightly modified Panel component (really with just a copy of original skin, changed a couple of heights and paddings, I have no experience in skinning stuff). And I want to add a tooltip with the title text if it's trunkated. I believe that it is possible, but just don't know how.

       

      Thanks in advance.

        • 1. Re: How to add a tooltip to spark Panel title?
          Vibhuti Gosavi(InfoCepts)

          Hi,

           

          For this you will have to create a custom tooltip usng ToolTipManager.createToolTip in one function and call this function on rollOver property of panel.

          Following code can help you.

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
              <s:layout>
                  <s:VerticalLayout />
              </s:layout>
              <fx:Script>
                  
                  import mx.managers.ToolTipManager;
                  import mx.controls.ToolTip;
                  public var myTip:ToolTip;
                 
          private function createBigTip():void {
                      var s:String = "These buttons let you save, exit, or continue with the current operation."
                      myTip = ToolTipManager.createToolTip(s,75,75) as ToolTip;
                      myTip.setStyle("backgroundColor",0xFFCC00);
                      myTip.width = 125;
                      myTip.height = 75;
                  }
                  private function destroyBigTip():void {
                      ToolTipManager.destroyToolTip(myTip);
                  }
               
              </fx:Script>
              <fx:Style>
                  @namespace s "library://ns.adobe.com/flex/spark";
                  s|Panel {
                      paddingLeft: 5;
                      paddingRight: 5;
                      paddingTop: 5;
                      paddingBottom: 5;
                  }
              </fx:Style>
             
          <s:Panel title="ToolTips" height="200" width="200" rollOver="createBigTip()"
                  rollOut="destroyBigTip()">
                  <s:Button label="OK" y="20" toolTip="Save your changes and exit." />
                  <s:Button label="Apply" y="50" toolTip="Apply changes and continue." />
                  <s:Button label="Cancel" y="80" toolTip="Cancel and exit." />
              </s:Panel>
          </s:Application>

           

          Thanks and Regards,

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

          Vibhuti Gosavi | vgosavi@infocepts.com| www.infocepts.com

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