1 Reply Latest reply on Nov 22, 2010 9:42 PM by fleRavix

    How to draw tooltip with tail on the bottom right

    Flex Rock Level 1

      Hi,

       

          I need to draw tooltip with tail on the bottom right side of the tool tip.

       

      Regards,

      Jayagopal.

        • 1. Re: How to draw tooltip with tail on the bottom right
          fleRavix Level 2

          <mx:Canvas

          xmlns:mx="http://www.adobe.com/2006/mxml"

          width="80"

          height="25"

          minWidth="50"

          minHeight="25"

          horizontalScrollPolicy="off"

          verticalScrollPolicy="off"

          clipContent="false"

          creationComplete="show()"

          showEffect="{showEffect}"

          implements="mx.core.IToolTip"

          cornerRadius="5" backgroundColor="#FFFFFF">

           

          <mx:Script>

          <![CDATA[

          import mx.core.IToolTip;

           

          /**

          * THIS HAS TO BE an empty string of at least one character to

          * get a tool tip to be created by Flex

          */

          public static const TOOL_TIP_TRIGGER : String = ' ';

           

          public static const LEFT : String = 'LEFT';

          public static const RIGHT : String = 'RIGHT';

          public static const UP : String = 'UP';

          public static const DOWN : String = 'DOWN';

           

          /** A summed combination of left/right (or top/bottom) padding */

          private static const PADDING_SUM : int = 40;

          private static const PADDING : int = 20;

           

          private static const MIN_HEIGHT : int = 55;

           

          private static const DEF_ONE_FIELD_VISIBLE_HEIGHT : int = 59;

          private static const DEF_TWO_FIELD_VISIBLE_HEIGHT : int = 35;

           

          private static const DEF_WIDTH : int = 135;

          private static const MIN_WIDTH : int = 50;

          private static const MAX_WIDTH : int = 300; //262;

           

          private static const HTML_MODE_WIDTH : int = 200;

          private static const HTML_MODE_HEIGHT : int = 150;

          private static const HTML_MODE_MAX_HEIGHT : int = 200;

           

          private static const FIRST_LINE_Y : int = 17;

          private static const SECOND_LINE_Y : int = 36;

           

          /** This is the height of the title text filed for a single line of text*/

          private static const DEF_TITLE_TEXT_FIELD_HEIGHT : int = 24;

          /** This is the height of the content text filed for a single line of text*/

          private static const DEF_CONTENT_TEXT_FIELD_HEIGHT : int = 21;

           

          [Bindable] private var _titleVisible : Boolean = true;

                  [Bindable] private var _contentVisible : Boolean = true;

           

                 

                  /** required methods of the IToolTip interface; **/

                  public var _text:String;

           

                  [Bindable]

                  private var _backgroundColor : uint = 0xFFFFFF;

                  

                  [Bindable]

                  private var _strTitleText:String = "";  

           

                  [Bindable]

                  private var _strContentText:String = "";

           

           

                  [Bindable]

                  private var _direction :String = DOWN;        

           

                  [Bindable]

                  private var _spawnPoint : Point = null; //new Point(0,0);    

           

                  private static var _miCoachToolTip:ArrowToolTip;

           

           

                  public static function getInstance():ArrowToolTip

                  {

                  if (_miCoachToolTip == null)

                  {

                  _miCoachToolTip = new ArrowToolTip();

                  }

                  //_miCoachToolTip.reset();

                  return _miCoachToolTip;

                  }         

           

          /** required methods of the IToolTip interface; **/

                  public function get text():String {

                      return _text;

                  }

           

                  /** required methods of the IToolTip interface; **/      

                  public function set text(value:String):void

                  {

                  //_text=value;

                  }

           

            /** If HTML text is provided, other fields hidden **/

          /*

          [Bindable]

                  public function get htmlText():String

                  {

                      return _strHtmlText;

                  }

                  */

          /** If HTML text is provided, other fields hidden **/

          /*

                  public function set htmlText( value : String ):void

                  {

                     _strHtmlText = value;

                     if(_strHtmlText != null && _strHtmlText != '')

                     {

                     _strContentText = null;

                     _strTitleText = null;

                     }

                  }

                  */         

                      

          /** **/

          [Bindable]

                  public function get titleText():String

                  {

                      return _strTitleText;

                  }

           

          /** If HTML text is provided, other fields hidden **/

                  public function set titleText( value : String ):void

                  {

                     _strTitleText = value;

           

                     /*

                     if(value != null && value != '')

                     {

                     //_strHtmlText = null;

                     _titleVisible = false;

                     _contentVisible = false;

                     }

                     */

                  } 

           

           

            /** **/

          [Bindable]

                  public function get contentText():String

                  {

                      return _strContentText;

                  }

           

          /**  **/

                  public function set contentText( value : String ):void

                  {

                      /*

                      if(value != null && value != '')

                     {

                     //_strHtmlText = null;

                     }

                     */

                     _strContentText = value;

                  }

           

           

            /** **/

          [Bindable]

                  public function get direction():String

                  {

                      return _direction;

                  }

           

          /**  **/

                  public function set direction( value : String ):void

                  {

                     _direction = value;

                  }

           

            /** **/

          [Bindable]

                  public function get spawnPoint():Point

                  {

                      return _spawnPoint;

                  }

           

          /**  **/

                  public function set spawnPoint( value : Point ):void

                  {

                     _spawnPoint = value;

                    

                  }

           

                  private function show() : void

          {

          _backgroundColor = this.getStyle('backgroundColor') as uint;

          layoutTextFields();

          //adjustSizingForText();

          drawArrow();

          }

           

           

          private function layoutTextFields () : void

          {

          layoutForStandardText()

           

          }

           

           

           

          /**

          * This takes into account if one, two or all three fields are visible

          * It positions and resizes as needed.

          * Not 100% operational as of 11-5-2008

          */

          private function layoutForStandardText () : void

          {

          //_useHTMLText = false;

           

          // //this.width = DEF_WIDTH;

          //this.height = DEF_TWO_FIELD_VISIBLE_HEIGHT;

           

          _titleVisible = (_strTitleText != null && _strTitleText != '');

          _contentVisible = (_strContentText!= null && _strContentText != '');

           

          var metricsTitle : TextLineMetrics;

          var metricsContent : TextLineMetrics;

           

          //Only Title is visible/enabled

          if(_titleVisible  && !_contentVisible)

          {

          this.height = DEF_ONE_FIELD_VISIBLE_HEIGHT;

           

          //metricsTitle = txtTitle.measureText(txtTitle.text);

           

          //txtTitle.y = FIRST_LINE_Y;

          this.height = MIN_HEIGHT;

          this.width = MIN_WIDTH;

           

          // this.height = txtTitle.height + (PADDING * 1.5);

           

          this.height = metricsTitle.height + (FIRST_LINE_Y * 2)

           

          if((metricsTitle.width + (PADDING_SUM)) > MAX_WIDTH)

          {

          this.width = MAX_WIDTH;

          }

          else

          {

          this.width = metricsTitle.width + (PADDING_SUM);// + 3;

          }

           

          //Adjust the height if more than one line in the content

          // if( txtTitle.height > DEF_TITLE_TEXT_FIELD_HEIGHT)

          // {

          // this.height = this.height + (txtTitle.height - DEF_TITLE_TEXT_FIELD_HEIGHT);

          // }

          }

          //Only Content is visible/enabled

          else if(!_titleVisible  && _contentVisible)

          {

          this.height = DEF_ONE_FIELD_VISIBLE_HEIGHT;

           

          metricsContent = txtContent.measureText(txtContent.text);

           

          txtContent.y = FIRST_LINE_Y;

          this.height = MIN_HEIGHT;

           

          //Calcs for content

          /////////////////////////////////////////////////////////////////////////////

          if((metricsContent.height + (PADDING_SUM + 2 )) > DEF_ONE_FIELD_VISIBLE_HEIGHT)

          {

          this.height = DEF_ONE_FIELD_VISIBLE_HEIGHT;

          }

          else

          {

          this.height = metricsContent.height + (PADDING_SUM) + 2;

          }

           

          if((metricsContent.width + (PADDING_SUM)) > MAX_WIDTH)

          {

          this.width = MAX_WIDTH;

          }

          else

          {

          this.width = metricsContent.width + (PADDING_SUM);// + 2;

          }

           

          //Adjust the height if more than one line in the content

          if( txtContent.height > DEF_TITLE_TEXT_FIELD_HEIGHT)

          {

          this.height = this.height + (txtContent.height - DEF_TITLE_TEXT_FIELD_HEIGHT);

          }

          }

           

          //Only Sub title disabled/invisible

          //This is default on Plan details

          else if(_titleVisible  && _contentVisible)

          {

          this.height = DEF_TWO_FIELD_VISIBLE_HEIGHT;

           

           

          //metricsTitle = txtTitle.measureText(txtTitle.text);

          metricsContent = txtContent.measureText(txtContent.text);

           

          //txtTitle.y = FIRST_LINE_Y;

          txtContent.y = SECOND_LINE_Y;

           

          //Calcs for title

          /////////////////////////////////////////////////////////////////////////////

          if((metricsTitle.width + (PADDING*3)) > MAX_WIDTH)

          {

          this.width = MAX_WIDTH;

          }

          else

          {

          this.width = metricsTitle.width + (PADDING_SUM + 2);

          }

           

          //Calcs for content

          /////////////////////////////////////////////////////////////////////////////

          if((metricsContent.width + (PADDING_SUM + 2)) > MAX_WIDTH)

          {

          this.width = MAX_WIDTH;

          }

          else

          {

          //Only reset the width if the second line of text is longer than the first

          if((metricsContent.width + PADDING_SUM) > this.width)

          {

          this.width = metricsContent.width + PADDING_SUM;// + 2;

          }

          }

           

          //Default height for one line

          this.height = metricsTitle.height + metricsContent.height + PADDING_SUM - 3;;

           

          //Adjust the height if more than one line in the content

          if( txtContent.height > DEF_CONTENT_TEXT_FIELD_HEIGHT)

          {

          this.height = this.height + (txtContent.height - DEF_CONTENT_TEXT_FIELD_HEIGHT) + 2;

          }

           

          }

           

          }

           

           

          /**

          * draw the colored and white backgrounds, and the arrow

          */

          private function drawArrow ():void

          {

          var g:Graphics = this.graphics;

          g.clear();

          g.beginFill(0xFFFFFF, 1);

           

          whiteHRule.x = this.width - 40;

          whiteHRule.y = 20;

           

          g.moveTo (this.width - 50, 25);

          g.lineTo (this.width - 40,  50);

          g.lineTo (this.width - 30, 20);

          }

           

          protected override function commitProperties():void

          {

          super.commitProperties();

          }

           

          protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

          {

          super.updateDisplayList(unscaledWidth, unscaledHeight);

          layoutForStandardText();

          drawArrow();

          }

           

          public function reset () : void 

          {

          _strContentText = null;

          //_strHtmlText = null;

          _strTitleText = null;

          }

           

           

           

          ]]>

          </mx:Script>

           

          <mx:Text

          id='txtContent'

          text="{_strContentText}"

          width='100%'

          paddingLeft="0"

          paddingRight="0"

          paddingBottom="0"

          paddingTop="0"

          y="3" x="2" textAlign="center" fontFamily="Verdana" fontSize="9" fontWeight="bold"/>

           

           

          <!-- This line is here simply to get rid of the canvas border where the pointer touches the panel -->

          <mx:HRule y='{this.height - 1}' id="whiteHRule" x='20' width="21" strokeWidth="1" strokeColor='{_backgroundColor}'/>

           

          <mx:Fade id="showEffect" alphaFrom="0" alphaTo="1" duration="200"/>

          </mx:Canvas>

          Mark this answered if helpful