Dojo Tooltip only shows after first mousover event

http://stackoverflow.com/questions/10949403/dojo-tooltip-only-shows-after-first-mousover-event

by phusick

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<div id="groups">
    <button id="b1" class="group-link">group #1</button>
    <button id="b2" class="group-link">group #2</button>
    
</div>

CSS

body {
    padding: 30px;
}

JavaScript

require([
    "dojo/dom",
    "dojo/on",
    "dojo/_base/xhr",
    "dijit/Tooltip",
    "dojo/domReady!"
], function(
    dom,
    on,
    xhr,
    Tooltip
) {
    
    
    on(dom.byId("groups"), ".group-link:mouseover", function(e) {
        var target = e.target;
        Tooltip.show("Loading...", target);
        
         var def = xhr.post({
             url: "/echo/html/",
             content: { html: target.textContent},
             failOk: true,
             
             load: function(data) {
                Tooltip._masterTT.xhr = null;
                Tooltip._masterTT.containerNode.innerHTML = data;                 
                Tooltip._masterTT.domNode.width = "auto";
             },
             error: function(e) {
                 if (e.dojoType != "cancel") {
                     console.error(e);
                 }
             },
             
         });
            
        Tooltip._masterTT.xhr = def;            
    });
    
    on(dom.byId("groups"), ".group-link:mouseout", function(e) {
        var target = e.target;        
        Tooltip.hide(target);
        if (Tooltip._masterTT.xhr) {
            Tooltip._masterTT.xhr.cancel();
        }
    });

        
});