Positionned tooltip

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

by psoares

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css">
<div class="fakeRectangle">Mouse hover me
</div>

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

CSS

.fakeRectangle {
    position : absolute;
    left : 200px;
    top : 200px;
    border : 1px solid black;
    cursor : pointer;
    padding : 30px;
}
#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;
}

JavaScript

dojo.require("dijit.Tooltip");
dojo.ready(function(){

    var rect = dojo.query(".fakeRectangle").pop();
    
    var position = dojo.coords(rect, true); // true includes scroll

    var aroundRect = {
        x : position.t,
        y : position.l,
        width : position.w,
        height : position.h
    };
    
    var tooltip = dojo.byId("tooltip");

    dojo.connect(rect, "mouseover", function(evt){
        console.debug("Mouse over the box", evt);            
        dijit.showTooltip(tooltip.innerHTML, aroundRect, ["after", "above"]);
    });
    
    var closeBtn = dojo.byId("closeBtn");
    console.debug(closeBtn);
    dojo.connect(window, "click", function(evt) {
        console.debug("hiding tooltip", evt.target);
        if (evt.target.id == "closeBtn") {
            dijit.hideTooltip(aroundRect);
        }
    });
    
});