4 Replies Latest reply on Feb 29, 2008 6:25 PM by JoshBeall

    Display tooltip on focus

    JoshBeall Level 1
      Hi All,

      I have a textbox for entering a date, and the ToolTip is "MM/DD/YYYY", so people can see what format date is required.

      However, if they are simply tabbing through the form (as many people do), they will never see the tooltip. They have to actually position the mouse over the TextInput to see the tooltip.

      Is there a way to display the tooltip on focus? So that as soon as they tab to the date textinput, it pops up the tooltip. I thought about listening for the focus event, and then programmatically popping up a tooltip -- but I couldn't figure out a way to programmatically pop up the tooltip. The only way seemed to be if the mouse was hovering over the textinput.


        • 1. Re: Display tooltip on focus
          Hi Josh, you can use the ToolTipManager to create and destroy tooltips. Your idea of listening for focus events should work. When focusIn is triggered, you should be able to get the event target, and from that, get the tooltip text. You can also use the target to get its position. Use that information to call ToolTipManager.createToolTip(text, x, y). Save the returned tooltip reference. For the focusOut event, you should be able to call ToolTipManager.destroyToolTip with the tooltip reference returned by the create function. Hope that helps. --Bruce
          • 2. Display tooltip on focus
            BUMP - as I was about to post the exact same question.

            To get around problems like this, most bloggers show ways to develop your own tool tip management - like the OP, I actually like Flex's implementation, but only want to make small edits like this one.

            FYI - ToolTipManager calls createToolTip() and destroyToolTip() on mouseover and mouseout, but I can't quite figure out how to force those methods on my own and still keep it all along with the ToolTipManager already in place (i.e. - all of my validators, etc).

            Also - another place that I would prefer to use this functionality other than onFocus would be, in the valid and invalid events of a textInput control. i.e. on invalid, showErrorToolTip.

            There must be a really easy way to do this,
            • 3. Re: Display tooltip on focus
              politicochris Level 1
              AHA! Spent a few minutes and realized that ToolTipManager MUST be listening for mouse_over/mouse_out in order to show a tool tip and that I could just manually dispatch a MOUSE_OVER or MOUSE_OUT event to control this.

              private var showError:MouseEvent = new MouseEvent(MouseEvent.MOUSE_OVER);
              private var removeError:MouseEvent = new MouseEvent(MouseEvent.MOUSE_OUT);

              In your handler, be it focusIn or whatever, simply dispatch it using the component i.e.:

              <mx:TextInput focusIn="inFocus(event)"/>

              private function inFocus(event:FocusEvent):void {

              ...in my case, I apply a custom style to the textbox. In the above example, I just see if that style is applied or not. i.e.:

              <mx:TextInput styleName="preInput" focusIn="inFocus(event)" invalid="styleInvalid(event)" valid="styleValid(event)"/>

              private function styleInvalid(event:Event):void {
              event.currentTarget.styleName = "failedInput";
              private function styleValid(event:Event):void {
              event.currentTarget.styleName = "postInput";

              ...then on my focus handling, I can check for the styleName:

              private function inFocus(event:FocusEvent):void {
              if (event.currentTarget.styleName == "failedInput") {
              • 4. Re: Display tooltip on focus
                JoshBeall Level 1
                Seems a bit "hackalicious"--the real issue is that there should be a way to programmatically show and hide the tooltip. But I guess a workaround is better than nothing! Thanks for sharing.