Positionned tooltip on a gfx shape

Shows how to create a tooltip around an arbitrarily defined rectangle in the page.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
<div id="surface">
</div>

<div id="tooltip">
    <div>
        <div id="closeBtn">X</div>
        <a href="http://www.google.com" target=_blank>Google</a>
    </div>           
</div>

CSS

#surface {
    background : lightgray;
    width : 400px;
    height : 300px;
    position : absolute;
    top : 20px;
    left : 130px;
}

#closeBtn {
    float:right;
    width : 12px;
    height : 12px;
    background : red;
    color : yellow;
    border : 1px solid darkgreen;
    cursor : pointer;
    margin-left : 12px;
    padding : 2px;
    text-align : center;
}
#tooltip {
    display : none;
    visibility : hidden;
    border : 12px;
    width : 200px;
}

JavaScript

dojo.require("dijit.Tooltip");
dojo.require("dojox.gfx");
dojo.require("dijit.ProgressBar");

dojo.ready(function(){

    var surfacePosition = dojo.position(dojo.byId("surface"), true);

    var surface = dojox.gfx.createSurface("surface", surfacePosition.w, surfacePosition.h);

    var rect = surface.createRect({ x:23, y:56, width: 100, height: 50 })
        .setFill("#b3fcff")
        .setStroke("black");

    dojo.style(rect.rawNode, "cursor", "pointer");

    console.debug("Surface position", surfacePosition);

    console.debug("Rectangle position", rect.shape);

    var aroundRect = {
        x : surfacePosition.x + rect.shape.x,
        y : surfacePosition.y + rect.shape.y,
        width : rect.shape.width,
        height : rect.shape.height
    };

    var progress = new dijit.ProgressBar({
        style : "width : 180px; height : 12px; font-size : 8pt; margin-top : 15px;"
    }).placeAt("tooltip");

    var newdiv = dojo.create("div",
                             {
                                 id: "newdiv",
                                 style: "position:absolute; left:" + aroundRect.x + "px;" +
                                     " top:" + aroundRect.y + "px;"
                             },
                             dojo.body(), "last");

    var progress2 = new dijit.ProgressBar({
        style : "left:10px; height : 12px; width:" + (aroundRect.width-22) +
            "px; font-size : 8pt; margin-top : 15px;"
    }).placeAt("newdiv");

    console.debug("aroundRect", aroundRect);

    var tooltip = dojo.byId("tooltip");
    console.debug(rect.getEventSource());
    var mouseoverhandler = function(evt){
        console.debug("Mouse over the box");
        dijit.showTooltip(tooltip.innerHTML, aroundRect, ["after", "above"]);
    };
    dojo.connect(rect.getEventSource(), "onmouseenter", mouseoverhandler);

    var closeBtn = dojo.byId("closeBtn");
    console.debug(closeBtn);
    dojo.connect(window, "click", function(evt) {
       ...