foo9/demo.haml

## demo.haml
!!! 5
%html
  %head
    %meta(charset="utf-8")
    %title="demo"
    %script(src="http://code.createjs.com/createjs-2013.02.12.min.js")
    %script(src="foo9.createjs.tooltip.js")
    :css
      canvas {
        background: #abc;
      }
  %body
    %canvas#testCanvas(width="300" height="300")

    :javascript
      var canvas = document.getElementById("testCanvas");
      var stage = new createjs.Stage(canvas);

      var tip = new foo9.createjs.Tooltip("abc12", 60, 30);
      stage.addChild(tip);

      stage.update();

## demo.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>demo</title>
    <script src='http://code.createjs.com/createjs-2013.02.12.min.js'></script>
    <script src='foo9.createjs.tooltip.js'></script>
    <style>
      canvas {
        background: #abc;
      }
    </style>
  </head>
  <body>
    <canvas height='300' id='testCanvas' width='300'></canvas>
    <script>
      var canvas = document.getElementById("testCanvas");
      var stage = new createjs.Stage(canvas);

      var tip = new foo9.createjs.Tooltip("abc12", 60, 30);
      stage.addChild(tip);

      stage.update();
    </script>
  </body>
</html>

## foo9.createjs.tooltip.coffee
class Tooltip extends createjs.Container
    constructor: (@msg, @width = 50, @height = 30, @radius = 4) ->
        @initialize()
        @x = 0
        @y = 0
        @shape = null
        @text = null
        @_draw()


    _draw: ->
        fillColor = "#000"
        shadowColor = "#000"
        fontColor = "#fff"
        arrowWidth = 6
        arrowHeight = 6

        @shape = new createjs.Shape()
        g = @shape.graphics
        g.beginFill(fillColor)
        g.drawRoundRect(@x, @y, @width, @height - arrowHeight, @radius)
        g.moveTo((this.width * 0.5) - arrowWidth, this.height - arrowHeight)
        g.lineTo((this.width * 0.5), this.height)
        g.lineTo((this.width * 0.5) + arrowWidth, this.height - arrowHeight)
        g.endFill()
        @shape.shadow = new createjs.Shadow(shadowColor, 0, 0, 6)
        @shape.alpha = 0.6
        @addChild @shape

        @text = new createjs.Text(@msg, "12px Arial", fontColor)
        @text.textAlign = "center"
        @text.textBaseline = "bottom"
        @text.maxWidth = @width
        @text.x = @width * 0.5
        @text.y = ((@height + 4 - arrowHeight) + @text.getMeasuredHeight()) * 0.5
        @addChild @text

        return


@foo9 = @foo9 || {}
@foo9.createjs = @foo9.createjs || {}
@foo9.createjs.Tooltip = Tooltip

## foo9.createjs.tooltip.js
// Generated by CoffeeScript 1.6.2
(function() {
  var Tooltip,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

  Tooltip = (function(_super) {
    __extends(Tooltip, _super);

    function Tooltip(msg, width, height, radius) {
      this.msg = msg;
      this.width = width != null ? width : 50;
      this.height = height != null ? height : 30;
      this.radius = radius != null ? radius : 4;
      this.initialize();
      this.x = 0;
      this.y = 0;
      this.shape = null;
      this.text = null;
      this._draw();
    }

    Tooltip.prototype._draw = function() {
      var arrowHeight, arrowWidth, fillColor, fontColor, g, shadowColor;

      fillColor = "#000";
      shadowColor = "#000";
      fontColor = "#fff";
      arrowWidth = 6;
      arrowHeight = 6;
      this.shape = new createjs.Shape();
      g = this.shape.graphics;
      g.beginFill(fillColor);
      g.drawRoundRect(this.x, this.y, this.width, this.height - arrowHeight, this.radius);
      g.moveTo((this.width * 0.5) - arrowWidth, this.height - arrowHeight);
      g.lineTo(this.width * 0.5, this.height);
      g.lineTo((this.width * 0.5) + arrowWidth, this.height - arrowHeight);
      g.endFill();
      this.shape.shadow = new createjs.Shadow(shadowColor, 0, 0, 6);
      this.shape.alpha = 0.6;
      this.addChild(this.shape);
      this.text = new createjs.Text(this.msg, "12px Arial", fontColor);
      this.text.textAlign = "center";
      this.text.textBaseline = "bottom";
      this.text.maxWidth = this.width;
      this.text.x = this.width * 0.5;
      this.text.y = ((this.height + 4 - arrowHeight) + this.text.getMeasuredHeight()) * 0.5;
      this.addChild(this.text);
    };

    return Tooltip;

  })(createjs.Container);

  this.foo9 = this.foo9 || {};

  this.foo9.createjs = this.foo9.createjs || {};

  this.foo9.createjs.Tooltip = Tooltip;

}).call(this);
	!!! 5
	%html
	%head
	%meta(charset="utf-8")
	%title="demo"
	%script(src="http://code.createjs.com/createjs-2013.02.12.min.js")
	%script(src="foo9.createjs.tooltip.js")
	:css
	canvas {
	background: #abc;
	}
	%body
	%canvas#testCanvas(width="300" height="300")

	:javascript
	var canvas = document.getElementById("testCanvas");
	var stage = new createjs.Stage(canvas);

	var tip = new foo9.createjs.Tooltip("abc12", 60, 30);
	stage.addChild(tip);

	stage.update();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>demo</title>
	<script src='http://code.createjs.com/createjs-2013.02.12.min.js'></script>
	<script src='foo9.createjs.tooltip.js'></script>
	<style>
	canvas {
	background: #abc;
	}
	</style>
	</head>
	<body>
	<canvas height='300' id='testCanvas' width='300'></canvas>
	<script>
	var canvas = document.getElementById("testCanvas");
	var stage = new createjs.Stage(canvas);

	var tip = new foo9.createjs.Tooltip("abc12", 60, 30);
	stage.addChild(tip);

	stage.update();
	</script>
	</body>
	</html>
	class Tooltip extends createjs.Container
	constructor: (@msg, @width = 50, @height = 30, @radius = 4) ->
	@initialize()
	@x = 0
	@y = 0
	@shape = null
	@text = null
	@_draw()


	_draw: ->
	fillColor = "#000"
	shadowColor = "#000"
	fontColor = "#fff"
	arrowWidth = 6
	arrowHeight = 6

	@shape = new createjs.Shape()
	g = @shape.graphics
	g.beginFill(fillColor)
	g.drawRoundRect(@x, @y, @width, @height - arrowHeight, @radius)
	g.moveTo((this.width * 0.5) - arrowWidth, this.height - arrowHeight)
	g.lineTo((this.width * 0.5), this.height)
	g.lineTo((this.width * 0.5) + arrowWidth, this.height - arrowHeight)
	g.endFill()
	@shape.shadow = new createjs.Shadow(shadowColor, 0, 0, 6)
	@shape.alpha = 0.6
	@addChild @shape

	@text = new createjs.Text(@msg, "12px Arial", fontColor)
	@text.textAlign = "center"
	@text.textBaseline = "bottom"
	@text.maxWidth = @width
	@text.x = @width * 0.5
	@text.y = ((@height + 4 - arrowHeight) + @text.getMeasuredHeight()) * 0.5
	@addChild @text

	return


	@foo9 = @foo9 \|\| {}
	@foo9.createjs = @foo9.createjs \|\| {}
	@foo9.createjs.Tooltip = Tooltip
	// Generated by CoffeeScript 1.6.2
	(function() {
	var Tooltip,
	__hasProp = {}.hasOwnProperty,
	__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

	Tooltip = (function(_super) {
	__extends(Tooltip, _super);

	function Tooltip(msg, width, height, radius) {
	this.msg = msg;
	this.width = width != null ? width : 50;
	this.height = height != null ? height : 30;
	this.radius = radius != null ? radius : 4;
	this.initialize();
	this.x = 0;
	this.y = 0;
	this.shape = null;
	this.text = null;
	this._draw();
	}

	Tooltip.prototype._draw = function() {
	var arrowHeight, arrowWidth, fillColor, fontColor, g, shadowColor;

	fillColor = "#000";
	shadowColor = "#000";
	fontColor = "#fff";
	arrowWidth = 6;
	arrowHeight = 6;
	this.shape = new createjs.Shape();
	g = this.shape.graphics;
	g.beginFill(fillColor);
	g.drawRoundRect(this.x, this.y, this.width, this.height - arrowHeight, this.radius);
	g.moveTo((this.width * 0.5) - arrowWidth, this.height - arrowHeight);
	g.lineTo(this.width * 0.5, this.height);
	g.lineTo((this.width * 0.5) + arrowWidth, this.height - arrowHeight);
	g.endFill();
	this.shape.shadow = new createjs.Shadow(shadowColor, 0, 0, 6);
	this.shape.alpha = 0.6;
	this.addChild(this.shape);
	this.text = new createjs.Text(this.msg, "12px Arial", fontColor);
	this.text.textAlign = "center";
	this.text.textBaseline = "bottom";
	this.text.maxWidth = this.width;
	this.text.x = this.width * 0.5;
	this.text.y = ((this.height + 4 - arrowHeight) + this.text.getMeasuredHeight()) * 0.5;
	this.addChild(this.text);
	};

	return Tooltip;

	})(createjs.Container);

	this.foo9 = this.foo9 \|\| {};

	this.foo9.createjs = this.foo9.createjs \|\| {};

	this.foo9.createjs.Tooltip = Tooltip;

	}).call(this);