JSFiddle - React, Tailwind, and code Playground

by psoares

HTML

<div id="surface"></div>
<div id="tt" class="dijitTooltip">Hello</div>

CSS

#surface{
    position : "absolute";
    top : 20px;
    left : 40px;
}
#tt { position : absolute;
    left : -1000;
    top : -1000;
}

JavaScript

dojo.require("dojox.gfx");
dojo.require("dijit.Tooltip");
dojo.ready(function(){
    var gfx = dojox.gfx;
     var sampleSVGdojoxGfx = gfx.createSurface("surface", 200, 200);
     
    var rect = sampleSVGdojoxGfx.createRect({ x: 50, y: 50, w:100, h:100 })
                                 .setFill("white")
                                 .setStroke("gray");
   
    var t = new dijit.Tooltip({
        connectId : "surface",
        label : "Hello"
    });
                               
    rect.connect("onmouseout", function(evt) {
        dijit.hideTooltip(t);
    });
    rect.connect("onmouseover", function(evt) {
        var aroundRect = {};
        var surfaceRect = dojo.marginBox("surface");
        console.debug(surfaceRect);
        var rectRect = rect.getBoundingBox();
        console.debug(rectRect);
        aroundRect.x = surfaceRect.l + rectRect.x;
        aroundRect.y = surfaceRect.t + rectRect.y;
        aroundRect.width = rectRect.width;
        aroundRect.height = rectRect.height;
        console.debug(aroundRect);
        
        dijit.showTooltip(t, aroundRect, ['TR','TL','BL','BR']);
    });

   
 });