Share 'Examples' on Delicious Share 'Examples' on Facebook Share 'Examples' on Google Bookmarks Share 'Examples' on Twitter

  1. Simple Tooltip
  2. Animated Tooltip
  3. Advanced Tooltip
  4. Individual Tooltips
  5. Contextual Tooltips
  6. All Examples
    1. Popup
    2. Tooltip
    3. Placement
  7. Leave a Comment

Examples

Categories: Popup (9), Tooltip (5), Placement (5)

Simple Tooltip

The example shows the setup of a basic tooltip using the ToolTipManager class. The main class creates the ToolTipManager instance and registers tooltip adapter and the actual tooltip instance together with a component selector. Whenever a box is moused, the ToolTipManager instance is commanded to show or hide a tooltip.

Category: Tooltip
SimpleExample.swf
SimpleExample.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
package layer.tooltip.simple {
  import layer.tooltip.common.SimpleAdapter;
  import layer.tooltip.common.SimpleSelector;
  import layer.tooltip.common.SimpleToolTip;
  import layout.common.box.Box;
  import org.as3commons.ui.layer.ToolTipManager;
  import org.as3commons.ui.layout.shortcut.hlayout;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;

  public class SimpleExample extends Sprite {
    private var _toolTipManager : ToolTipManager;
   
    public function SimpleExample() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);

      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _toolTipManager = new ToolTipManager(container);
      _toolTipManager.registerToolTip(
        new SimpleSelector(),
        new SimpleAdapter(),
        new SimpleToolTip()
      );
     
      hlayout(
        "marginX", 20, "marginY", 20,
        "maxItemsPerRow", 6,
        "hGap", 20, "vGap", 20,
        Box.create(18)
      ).layout(this);
     
      addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
      addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
    }

    private function mouseOverHandler(event : MouseEvent) : void {
      var box : Box = event.target as Box;
      _toolTipManager.show(box, box.toString());
    }

    private function mouseOutHandler(event : MouseEvent) : void {
      _toolTipManager.hide();
    }
  }
}
SimpleAdapter.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package layer.tooltip.common {
  import org.as3commons.ui.layer.tooltip.ToolTipAdapter;
  import flash.display.DisplayObject;
  import flash.geom.Point;

  public class SimpleAdapter extends ToolTipAdapter {
    override protected function onToolTip(toolTip : DisplayObject) : void {
      offset = new Point(-5, 5);
    }

    override protected function onContent(toolTip : DisplayObject, content : *) : void {
      SimpleToolTip(toolTip).text = content;
    }
  }
}
SimpleToolTip.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package layer.tooltip.common {
  import flash.display.Sprite;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class SimpleToolTip extends Sprite {
    private var _tf : TextField;
   
    public function SimpleToolTip() {
      _tf = new TextField();
      _tf.defaultTextFormat = new TextFormat("_sans", 10, 0x333333);
      _tf.background = true;
      _tf.backgroundColor = 0xFFFFEE;
      _tf.border = true;
      _tf.borderColor = 0xAAAA66;
      _tf.autoSize = TextFieldAutoSize.LEFT;
      addChild(_tf);
    }
   
    public function set text(text : String) : void {
      _tf.text = text;
    }
  }
}
SimpleSelector.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
package layer.tooltip.common {
  import layout.common.box.Box;
  import org.as3commons.ui.layer.tooltip.IToolTipSelector;
  import flash.display.DisplayObject;

  public class SimpleSelector implements IToolTipSelector {
    public function approve(displayObject : DisplayObject) : Boolean {
      return displayObject is Box;
    }
  }
}

Animated Tooltip

The example shows the setup of an animated tooltip. The tooltip is shown after a short delay and auto hidden after 2 seconds. When a tooltip is shown and the mouse moves quickly to another object, the tip shall be simply moved rather than animated again. This is useful if users want to step over all object tooltips rapidly.

Category: Tooltip
AnimatedExample.swf
AnimatedExample.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package layer.tooltip.animated {
  import layer.tooltip.common.SimpleSelector;
  import layer.tooltip.common.SimpleToolTip;
  import layout.common.box.Box;
  import org.as3commons.ui.layer.ToolTipManager;
  import org.as3commons.ui.layout.shortcut.hlayout;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;

  public class AnimatedExample extends Sprite {
    private var _toolTipManager : ToolTipManager;
   
    public function AnimatedExample() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);

      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _toolTipManager = new ToolTipManager(container);
      _toolTipManager.registerToolTip(
        new SimpleSelector(),
        new AnimatedAdapter(),
        new SimpleToolTip()
      );
     
      hlayout(
        "marginX", 20, "marginY", 20,
        "maxItemsPerRow", 6,
        "hGap", 20, "vGap", 20,
        Box.create(18)
      ).layout(this);
     
      addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
      addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
    }

    private function mouseOverHandler(event : MouseEvent) : void {
      var box : Box = event.target as Box;
      _toolTipManager.show(box, box.toString());
    }

    private function mouseOutHandler(event : MouseEvent) : void {
      _toolTipManager.hide();
    }
  }
}
AnimatedAdapter.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
package layer.tooltip.animated {
  import layer.tooltip.common.SimpleToolTip;
  import com.gskinner.motion.GTween;
  import com.gskinner.motion.easing.Cubic;
  import org.as3commons.ui.layer.tooltip.ToolTipAdapter;
  import flash.display.DisplayObject;
  import flash.geom.Point;
  import flash.utils.clearTimeout;
  import flash.utils.setTimeout;

  public class AnimatedAdapter extends ToolTipAdapter {
    private var _tween : GTween;
    private var _delay : uint;
   
    override protected function onToolTip(toolTip : DisplayObject) : void {
      offset = new Point(-5, 5);
      autoHideAfter = 2000;

      _tween = new GTween();
      _tween.target = toolTip;
      _tween.duration = .2;
      _tween.ease = Cubic.easeOut;
      _tween.paused = true;

      toolTip.alpha = 0;
    }

    override protected function onContent(toolTip : DisplayObject, content : *) : void {
      SimpleToolTip(toolTip).text = content;
    }

    override protected function onShow(toolTip : DisplayObject, local : Point) : void {
      SimpleToolTip(toolTip).x = local.x;
      SimpleToolTip(toolTip).y = local.y;
     
      pauseTweens();

      if (toolTip.alpha == 1) {
        startAutoHide();
      } else if (toolTip.alpha == 0) {
        _delay = setTimeout(showTween, 500);
      } else {
        showTween();
      }
    }
   
    override protected function onRemove(toolTip : DisplayObject) : void {
      pauseTweens();
     
      if (toolTip.alpha == 0) {
        commitRemove();
      } else if (toolTip.alpha == 1) {
        _delay = setTimeout(hideTween, 100);
      } else {
        hideTween();
      }
    }
   
    private function showTween() : void {
      _tween.duration = (1 - _layer.alpha) * .2;
      _tween.setValue("alpha", 1);
      _tween.onComplete = function(tween : GTween) : void {
        startAutoHide();
      };
    }

    private function hideTween() : void {
      _tween.duration = (_layer.alpha) * .4;
      _tween.setValue("alpha", 0);
      _tween.onComplete = function(tween : GTween) : void {
        commitRemove();
      };
    }
   
    private function pauseTweens() : void {
      clearTimeout(_delay);
      _tween.paused = true;
      _tween.onComplete = null;
    }
  }
}
SimpleToolTip.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package layer.tooltip.common {
  import flash.display.Sprite;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class SimpleToolTip extends Sprite {
    private var _tf : TextField;
   
    public function SimpleToolTip() {
      _tf = new TextField();
      _tf.defaultTextFormat = new TextFormat("_sans", 10, 0x333333);
      _tf.background = true;
      _tf.backgroundColor = 0xFFFFEE;
      _tf.border = true;
      _tf.borderColor = 0xAAAA66;
      _tf.autoSize = TextFieldAutoSize.LEFT;
      addChild(_tf);
    }
   
    public function set text(text : String) : void {
      _tf.text = text;
    }
  }
}
SimpleSelector.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
package layer.tooltip.common {
  import layout.common.box.Box;
  import org.as3commons.ui.layer.tooltip.IToolTipSelector;
  import flash.display.DisplayObject;

  public class SimpleSelector implements IToolTipSelector {
    public function approve(displayObject : DisplayObject) : Boolean {
      return displayObject is Box;
    }
  }
}

Advanced Tooltip

The example shows the setup of an advanced tooltip with nose, show delay, auto hide and auto correction (with anchor swap and horizontal shift). Move the colored boxes around to see the tooltips align on the grey border.

Category: Tooltip
ToolTipTutorial.swf
ToolTipTutorial.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package layer.tooltip.tooltiptutorial.final {
  import org.as3commons.ui.layer.ToolTipManager;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.geom.Rectangle;

  public class ToolTipTutorial extends Sprite {
    public function ToolTipTutorial() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);

      // init bounds
      var bounds : Rectangle = new Rectangle(20, 20, 400, 300);
      with (graphics) {
        lineStyle(1, 0xCCCCCC);
        drawRect(bounds.x - 1, bounds.y - 1, bounds.width + 1, bounds.height + 1);
      }
      Globals.bounds = bounds;

      // init tooltips
      var container : Sprite = addChild(new Sprite()) as Sprite;
      Globals.toolTipManager = new ToolTipManager(container);
      Globals.toolTipManager.registerToolTip(
        new BoxToolTipSelector(),
        new BoxToolTipAdapter(),
        new BoxToolTip()
      );

      // add content
      var items : Sprite = addChildAt(new Sprite(), 0) as Sprite;
      items.addChild(new Box(60, 60, 80, 40, 0xAAAAAA));
      items.addChild(new Box(120, 230, 60, 60, 0x666666));
      items.addChild(new Box(180, 100, 40, 80, 0xEE4400));
      items.addChild(new Box(300, 50, 60, 60, 0x0044EE));
      items.addChild(new Box(280, 180, 40, 40, 0x44CC44));
    }
  }
}
BoxToolTipAdapter.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
package layer.tooltip.tooltiptutorial.final {
  import com.gskinner.motion.GTween;
  import com.gskinner.motion.easing.Cubic;
  import org.as3commons.ui.layer.tooltip.ToolTipAdapter;
  import flash.display.DisplayObject;
  import flash.geom.Point;
  import flash.utils.clearTimeout;
  import flash.utils.setTimeout;

  public class BoxToolTipAdapter extends ToolTipAdapter {
    private var _tween : GTween;
    private var _delay : uint;
   
    override protected function onToolTip(toolTip : DisplayObject) : void {
      offset = new Point(-25, 5);
      autoHideAfter = 2000;
      bounds = Globals.bounds;
      autoSwapAnchorsH = true;
      autoSwapAnchorsHDiff = 25;
      autoSwapAnchorsV = true;
      autoSwapAnchorsVDiff = 10;

      _tween = new GTween();
      _tween.target = toolTip;
      _tween.duration = .2;
      _tween.paused = true;

      toolTip.alpha = 0;
    }

    override protected function onContent(toolTip : DisplayObject, content : *) : void {
      BoxToolTip(toolTip).text = content;
    }
   
    override protected function onDraw(toolTip : DisplayObject, ownerAnchor : uint, toolTipAnchor : uint, hShift : int, vShift : int) : void {
      BoxToolTip(toolTip).setPlacementProperties(ownerAnchor, toolTipAnchor, hShift);
      BoxToolTip(toolTip).draw();
    }

    override protected function onShow(toolTip : DisplayObject, local : Point) : void {
      BoxToolTip(toolTip).x = local.x;
      BoxToolTip(toolTip).y = local.y;
     
      pauseTweens();

      if (toolTip.alpha == 1) {
        startAutoHide();
      } else if (toolTip.alpha == 0) {
        _delay = setTimeout(showTween, 500);
      } else {
        showTween();
      }
    }
   
    override protected function onRemove(toolTip : DisplayObject) : void {
      pauseTweens();
     
      if (toolTip.alpha == 0) {
        commitRemove();
      } else if (toolTip.alpha == 1) {
        _delay = setTimeout(hideTween, 100);
      } else {
        hideTween();
      }
    }
   
    private function showTween() : void {
      _tween.duration = (1 - _layer.alpha) * .2;
      _tween.ease = Cubic.easeIn;
      _tween.setValue("alpha", 1);
      _tween.onComplete = function(tween : GTween) : void {
        startAutoHide();
      };
    }

    private function hideTween() : void {
      _tween.duration = (_layer.alpha) * .4;
      _tween.ease = Cubic.easeOut;
      _tween.setValue("alpha", 0);
      _tween.onComplete = function(tween : GTween) : void {
        commitRemove();
      };
    }
   
    private function pauseTweens() : void {
      clearTimeout(_delay);
      _tween.paused = true;
      _tween.onComplete = null;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
package layer.tooltip.tooltiptutorial.final {
  import common.ColorUtil;
  import org.as3commons.ui.layer.placement.PlacementAnchor;
  import flash.display.GradientType;
  import flash.display.Sprite;
  import flash.geom.Matrix;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class BoxToolTip extends Sprite {
    private var _tf : TextField;
    private var _noseSize : uint = 10;
   
    private var _ownerAnchor : uint;
    private var _toolTipAnchor : uint;
    private var _hShift : int;

    public function BoxToolTip() {
      _tf = new TextField();
      _tf.defaultTextFormat = new TextFormat("_sans", 10, 0x666666);
      _tf.autoSize = TextFieldAutoSize.LEFT;
      _tf.x = _tf.y = 2;
      addChild(_tf);
    }
   
    override public function get width() : Number {
      return _tf.textWidth + 8;
    }

    override public function get height() : Number {
      return _tf.textHeight + 8 + _noseSize;
    }

    internal function set text(text : String) : void {
      _tf.wordWrap = false;
      _tf.text = text;
      if (_tf.textWidth > 140) {
        _tf.width = 140;
        _tf.wordWrap = true;
      }
    }

    internal function setPlacementProperties(ownerAnchor : uint, toolTipAnchor : uint, hShift : int) : void {
      _ownerAnchor = ownerAnchor;
      _toolTipAnchor = toolTipAnchor;
      _hShift = hShift;
    }

    internal function draw() : void {
      _tf.y = PlacementAnchor.isTop(_ownerAnchor) ? 2 : _noseSize + 2;

      graphics.clear();
     
      // fill
      var matrix : Matrix = new Matrix();
      matrix.createGradientBox(width, height, Math.PI / 180 * 45, 0, 0);
      var gradient : Array = ColorUtil.getGradient(0xFFEE11);
      graphics.beginGradientFill(GradientType.LINEAR, gradient, [1, 1], [0, 255], matrix);

      // background
      var bgY : uint = 0;
      if (PlacementAnchor.isBottom(_ownerAnchor)) bgY = _noseSize;
      graphics.drawRoundRect(0, bgY, width, height - _noseSize, 6, 6);

      // nose
      if (!PlacementAnchor.isMiddle(_ownerAnchor)) {
        var noseX : int = _noseSize;
        if (PlacementAnchor.isCenter(_toolTipAnchor)) noseX = (width - _noseSize) / 2;
        else if (PlacementAnchor.isRight(_toolTipAnchor)) noseX = width - _noseSize * 2.5;
        noseX -= _hShift;
        noseX = Math.max(_noseSize, Math.min(noseX, width - _noseSize * 2.5));
       
        var noseY : uint = PlacementAnchor.isTop(_ownerAnchor) ? height - _noseSize : _noseSize;
        var noseHeight : int = PlacementAnchor.isTop(_ownerAnchor) ? _noseSize : -_noseSize;
       
        with (graphics) {
          moveTo(noseX, noseY);
          lineTo(noseX + _noseSize * .75, noseY + noseHeight);
          lineTo(noseX + _noseSize * 1.5, noseY);
          lineTo(noseX, noseY);
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
package layer.tooltip.tooltiptutorial.final {
  import common.ColorUtil;
  import flash.display.GradientType;
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import flash.geom.Matrix;
  import flash.geom.Point;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class Box extends Sprite {
    private static var _boxId : uint;
    private var _color : uint;
    private var _id : uint;
    private var _mousePosition : Point;

    public function Box(x : uint, y : uint, width : uint, height : uint, color : uint) {
      this.x = x;
      this.y = y;
      _color = color;
      _id = ++_boxId;

      var matrix : Matrix = new Matrix();
      matrix.createGradientBox(width, height, Math.PI / 180 * 45, 0, 0);
      var gradient : Array = ColorUtil.getGradient(_color);

      with (graphics) {
        beginGradientFill(GradientType.LINEAR, gradient, [1, 1], [0, 255], matrix);
        drawRoundRect(0, 0, width, height, 6, 6);
      }
     
      var tf : TextField = new TextField();
      tf.defaultTextFormat = new TextFormat("_sans", 12, 0xFFFFFF);
      tf.text = "" + _id;
      tf.x = tf.y = 4;
      tf.autoSize = TextFieldAutoSize.LEFT;
      addChild(tf);

      mouseChildren = false;
      addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
      addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
    }

    private function mouseOverHandler(event : MouseEvent) : void {
      parent.addChild(this); // move to top
      removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
      addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
     
      showToolTip();
    }

    private function mouseOutHandler(event : MouseEvent) : void {
      removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
      addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

      hideToolTip();
    }
   
    private function mouseDownHandler(event : MouseEvent) : void {
      _mousePosition = new Point(mouseX, mouseY);
      stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
      stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
    }

    private function mouseUpHandler(event : MouseEvent) : void {
      stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
      stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
    }
   
    private function mouseMoveHandler(event : MouseEvent) : void {
      var point : Point = new Point(event.stageX, event.stageY);
      point.x -= _mousePosition.x;
      point.y -= _mousePosition.y;
      point = parent.globalToLocal(point);

      point.x = Math.max(Globals.bounds.left, point.x);
      point.x = Math.min(Globals.bounds.right - width, point.x);
      point.y = Math.max(Globals.bounds.top, point.y);
      point.y = Math.min(Globals.bounds.bottom - height, point.y);

      x = point.x;
      y = point.y;
      showToolTip(); // move tooltip
    }
   
    private function showToolTip() : void {
      var text : String = "Box" + _id + " " + ColorUtil.hexToString(_color);
      if (_id == 2) {
        text = "Box" + "\n\n"
          + "ID: " + _id + "\n"
          + "Color: " + ColorUtil.hexToString(_color) + "\n\n"
          + "Info: This is a large tooltip that will be autosized to a max width of 140 px.";
      }
      Globals.toolTipManager.show(this, text);
    }

    private function hideToolTip() : void {
      Globals.toolTipManager.hide();
    }
  }
}

Individual Tooltips

It is possible to set up individual tooltips for different components. This example configures boxes to use either the advanced (box 1 and 2) or the simple tooltip (box 3 to 5) from the other tooltip examples. The advanced tooltip will be auto corrected at the grey border.

Category: Tooltip
IndividualTooltips.swf
IndividualTooltips.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package layer.tooltip.individual {
  import layer.tooltip.common.SimpleAdapter;
  import layer.tooltip.common.SimpleToolTip;
  import layer.tooltip.tooltiptutorial.final.*;
  import org.as3commons.ui.layer.ToolTipManager;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.geom.Rectangle;

  public class IndividualTooltips extends Sprite {
    public function IndividualTooltips() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);

      // init bounds
      var bounds : Rectangle = new Rectangle(20, 20, 400, 300);
      with (graphics) {
        lineStyle(1, 0xCCCCCC);
        drawRect(bounds.x - 1, bounds.y - 1, bounds.width + 1, bounds.height + 1);
      }
      Globals.bounds = bounds;

      // boxes
      var box1 : Box = addChild(new Box(60, 60, 80, 40, 0xAAAAAA)) as Box;
      var box2 : Box = addChild(new Box(120, 230, 60, 60, 0x666666)) as Box;
      var box3 : Box = addChild(new Box(180, 100, 40, 80, 0xEE4400)) as Box;
      var box4 : Box = addChild(new Box(300, 50, 60, 60, 0x0044EE)) as Box;
      var box5 : Box = addChild(new Box(280, 180, 40, 40, 0x44CC44)) as Box;

      // init tooltips
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      Globals.toolTipManager = new ToolTipManager(container);
     
      // box1, box2 tooltip
      Globals.toolTipManager.registerToolTip(
        new IndividualSelector(box1, box2),
        new BoxToolTipAdapter(),
        new BoxToolTip()
      );

      // box3, box4, box5 tooltip
      Globals.toolTipManager.registerToolTip(
        new IndividualSelector(box3, box4, box5),
        new SimpleAdapter(),
        new SimpleToolTip()
      );
    }
  }
}
IndividualSelector.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package layer.tooltip.individual {
  import org.as3commons.ui.layer.tooltip.IToolTipSelector;
  import flash.display.DisplayObject;

  public class IndividualSelector implements IToolTipSelector {
    private var _boxes : Array;

    public function IndividualSelector(...args) {
      _boxes = args;
    }
   
    public function approve(displayObject : DisplayObject) : Boolean {
      return _boxes.indexOf(displayObject) > -1;
    }
  }
}
1
 
1
 

Contextual Tooltips

You may let behave the same tooltip differently depending on properties of the owner object. The configuration can be placed in the tooltip adapter. The example shows four boxes, each with distinctive tooltip placement.

Category: Tooltip
ContextualToolTips.swf
ContextualToolTips.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package layer.tooltip.contextual {
  import layer.tooltip.common.SimpleToolTip;
  import org.as3commons.ui.layer.ToolTipManager;
  import org.as3commons.ui.layer.tooltip.AllSelector;
  import org.as3commons.ui.layout.shortcut.hlayout;
  import flash.display.Sprite;
  import flash.events.Event;

  public class ContextualToolTips extends Sprite {
    public static var toolTipManager : ToolTipManager;
   
    public function ContextualToolTips() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);

      // init tooltips
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      toolTipManager = new ToolTipManager(container);
      toolTipManager.registerToolTip(
        new AllSelector(),
        new ContextualToolTipAdapter(),
        new SimpleToolTip()
      );

      // setup boxes
      hlayout(
        "marginX", 150, "marginY", 50,
        "maxItemsPerRow", 2,
        "hGap", 20, "vGap", 20,
        new Box("Box1", 0xAAAAAA),
        new Box("Box2", 0xEE4400),
        new Box("Box3", 0x0044EE),
        new Box("Box4", 0x44CC44)
      ).layout(this);
    }
  }
}
ContextualToolTipAdapter.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package layer.tooltip.contextual {
  import layer.tooltip.common.SimpleToolTip;
  import org.as3commons.ui.layer.placement.PlacementAnchor;
  import org.as3commons.ui.layer.tooltip.ToolTipAdapter;
  import flash.display.DisplayObject;
  import flash.geom.Point;

  public class ContextualToolTipAdapter extends ToolTipAdapter {
    override protected function onContent(toolTip : DisplayObject, content : *) : void {
      switch (Box(owner).label) {
        case "Box1":
          ownerAnchor = PlacementAnchor.TOP_LEFT;
          toolTipAnchor = PlacementAnchor.BOTTOM_RIGHT;
          offset = new Point(5, 5);
          break;
        case "Box2":
          ownerAnchor = PlacementAnchor.TOP_RIGHT;
          toolTipAnchor = PlacementAnchor.BOTTOM_LEFT;
          offset = new Point(-5, 5);
          break;
        case "Box3":
          ownerAnchor = PlacementAnchor.BOTTOM_LEFT;
          toolTipAnchor = PlacementAnchor.TOP_RIGHT;
          offset = new Point(5, -5);
          break;
        case "Box4":
          ownerAnchor = PlacementAnchor.BOTTOM_RIGHT;
          toolTipAnchor = PlacementAnchor.TOP_LEFT;
          offset = new Point(-5, -5);
          break;
      }
     
      /*
        Alternative: evaluate position
     
        if (Box(owner).y > 150) {
          ownerAnchor = PlacementAnchor.TOP_LEFT;
          toolTipAnchor = PlacementAnchor.BOTTOM_RIGHT;
        } else {
          ownerAnchor = PlacementAnchor.BOTTOM_RIGHT;
          toolTipAnchor = PlacementAnchor.TOP_LEFT;
        }
      */

     
      SimpleToolTip(toolTip).text = content;
    }
  }
}
SimpleToolTip.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package layer.tooltip.common {
  import flash.display.Sprite;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class SimpleToolTip extends Sprite {
    private var _tf : TextField;
   
    public function SimpleToolTip() {
      _tf = new TextField();
      _tf.defaultTextFormat = new TextFormat("_sans", 10, 0x333333);
      _tf.background = true;
      _tf.backgroundColor = 0xFFFFEE;
      _tf.border = true;
      _tf.borderColor = 0xAAAA66;
      _tf.autoSize = TextFieldAutoSize.LEFT;
      addChild(_tf);
    }
   
    public function set text(text : String) : void {
      _tf.text = text;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package layer.tooltip.contextual {
  import flash.events.MouseEvent;
  import flash.display.Sprite;

  public class Box extends Sprite {
    private var _label : String;
   
    public function Box(label : String, color : uint) {
      _label = label;
      with (graphics) {
        beginFill(color);
        drawRect(0, 0, 40, 40);
      }
      addEventListener(MouseEvent.ROLL_OVER, rollOver);
      addEventListener(MouseEvent.ROLL_OUT, rollOut);
    }

    public function get label() : String {
      return _label;
    }

    private function rollOver(event : MouseEvent) : void {
      ContextualToolTips.toolTipManager.show(this, "Tooltip for " + _label);
    }

    private function rollOut(event : MouseEvent) : void {
      ContextualToolTips.toolTipManager.hide();
    }
  }
}

All Examples

Popup

Simple Popup

The example shows how a popup window is being created, removed and centered.

Related: Simple Popup
Category: Popup

Animated Popup

This is an extension of the simple popup example. Show and hide process of the popup is animated using tweens. The example code shows where to place the tweening in the source code.

Category: Popup

Multiple Popups

The example shows how to bring a popup in front and remove the top popup. Click a window to bring it in front. The remove button will remove the popup currently being on top.

Category: Popup

Multiple Animated Popups

This is an extension of the multiple popups example. Show and hide process of a popup is animated using tweens. The example code shows where to place the tweening in the code.

Category: Popup

Modal Popup

The example shows how to open and remove a modal popup window. You may also double click the popup window’s title bar to remove the popup.

Category: Popup

Multiple Modal Popups

The example shows multiple modal popups in action.

Category: Popup

Turning a modeless into a modal Popup

The example shows code and demonstrates the behavior of turning a modeless into a modal window at runtime.

Category: Popup

Focus and modal popups

The example shows how the PopUpManager may be queried to return if a modal popup is present or if an object of the main application is allowed to receive focus.

Category: Popup

Custom Modal Overly

The default overlay created with a modal popup is just a semi-transparent white shape. You may change it easily. You may also double click the popup window’s title bar to remove the popup.

Category: Popup

Tooltip

Simple Tooltip

The example shows the setup of a basic tooltip using the ToolTipManager class. The main class creates the ToolTipManager instance and registers tooltip adapter and the actual tooltip instance together with a component selector. Whenever a box is moused, the ToolTipManager instance is commanded to show or hide a tooltip.

Category: Tooltip

Animated Tooltip

The example shows the setup of an animated tooltip. The tooltip is shown after a short delay and auto hidden after 2 seconds. When a tooltip is shown and the mouse moves quickly to another object, the tip shall be simply moved rather than animated again. This is useful if users want to step over all object tooltips rapidly.

Category: Tooltip

Advanced Tooltip

The example shows the setup of an advanced tooltip with nose, show delay, auto hide and auto correction (with anchor swap and horizontal shift). Move the colored boxes around to see the tooltips align on the grey border.

Category: Tooltip

Individual Tooltips

It is possible to set up individual tooltips for different components. This example configures boxes to use either the advanced (box 1 and 2) or the simple tooltip (box 3 to 5) from the other tooltip examples. The advanced tooltip will be auto corrected at the grey border.

Category: Tooltip

Contextual Tooltips

You may let behave the same tooltip differently depending on properties of the owner object. The configuration can be placed in the tooltip adapter. The example shows four boxes, each with distinctive tooltip placement.

Category: Tooltip

Placement

Placement Demonstration

Using bounds, auto swap and auto correct you may fine grained control the placement of popups or overlays in case of exceedings. This example lets you specify placement anchors of both source and layer. Change the anchors of both the source and the layer object in the right column. Move the source object around to see the layer position being auto corrected and anchors swapped.

Category: Placement

Placement Anchors

The placement class allows you to align objects of different branches of the display list. For example, you may place a tooltip around a source object or the popup of a color picker around the trigger button. The examples allows you to modify the placement anchors for both the source and the layer object as well as a placement offset. Click the controls at the right side.

Category: Placement

Auto Correct

Sometimes the layer dimensions may exceed the stage’s area. You may assign a boundary rect to auto correct the layer’s position. The layer’s position then will be corrected to stay within the bounds. Useful application: Large tooltips who should not exceed the stage area.

Category: Placement

Auto Swap Anchors

You may enable the auto swap option to automatically swap the placement anchors of source and layer object in that case the layer exceeds the specified bounds. A tooltip for example can be displayed at the left instead of the default right side of the source object. Use the controls of the auto swap section to specify a diff value starting from that the anchors should be swapped. Move the grey box towards the boundaries. Swapping (if enabled) works for the following overlap conditions: The layer overlaps the bounds at …
right and anchors set to [source-right:layer-left] will be swapped to [source-left:layer-right]
bottom and anchors set to [s-bottom:l-top] will be swapped to [s-top:l-bottom]
top and anchors set to [s-top:l-bottom] will be swapped to [s-bottom:l-top]
left and anchors set to [s-left:l-right] will be swapped to [s-right:l-left].
In all other cases (e.g. layer or source with a centered anchor) swapping is not supported.

Category: Placement

Placement and Tooltip

Using bounds, auto swap and auto correct you may fine grained control the placement of popups or overlays in case of exceedings. The placement class provides an info object that can be used to replicate corrections. This example shows an advanced tooltip auto corrected and swapped. The tooltip consists of a nose which should be drawn and placed differently depending on the actual placement of the tooltip. Move the grey box towards the boundaries and see the tooltip align magically.

Category: Placement


Leave a Comment

You have a question or have experienced an issue? Please post it in the forum: http://sibirjak.tenderapp.com/ in order to make the discussion available at a more central place.