JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
<span id="instanced">Hover here to see an isntanced Tooltip.</span>
<p>Hover on the black rectangle or green circle to see shape tooltips.</p>
<div id="canvas_container">
</div>
<p id="reporter"></p>

CSS

#canvas_container {
    border: 1px dashed blue;
    height: 525px;
    width: 525px;
}

#instanced {
    font-style: italic;
}

canvas {
    border: 1px solid black;
}

JavaScript

require(["dojox/gfx","dojo/_base/connect","dojo/on","dijit/Tooltip","dojo/dom","dojo/domReady!"],function(gfx,connect,on,Tooltip,dom) {

    new Tooltip({connectId: ["instanced"], label: "Instanced Tooltip!"});
        
    var mySurface = gfx.createSurface("canvas_container",500,500);
    var myCanvasContainer = dom.byId("canvas_container");
    var reporter = dom.byId("reporter");
    
    var cnvCenter = {x: 250, y: 250};
    var shapesGroup = mySurface.createGroup();
    
    shapesGroup.setTransform(gfx.matrix.translate(cnvCenter.x, cnvCenter.y));
    
    var shape1 = shapesGroup.createRect({x: 0, y: 0, h: 20, w: 40}).setFill("black").setStroke("gray");
    var shape2 = shapesGroup.createRect({x: -50, y: 100, h: 30, w: 30}).setFill("red").setStroke("purple");
    var shape3 = shapesGroup.createEllipse({rx: 20, ry: 10, cx: -70, cy: 40}).setFill("blue").setStroke("black");
    var shape4 = shapesGroup.createCircle({cx: 100, cy: 75, r: 15}).setFill("green").setStroke("white");
    
    var shape1Bb = shape1.getTransformedBoundingBox();
    
    var shape1Tooltip = {
        content: "<p>I am a black and gray rectangle.</p>",
        around: {
            x: shape1Bb[1].x+myCanvasContainer.offsetLeft,
            y: shape1Bb[1].y-(Math.round((shape1Bb[1].y - shape1Bb[2].y)/2))+myCanvasContainer.offsetTop,
            w: 1,
            h: 1
        },
        position: ["after-centered","before-centered"]
    };
    
    var shape4Bb = shape4.getTransformedBoundingBox();
    
    var shape4Tooltip = {
        content: "<p>I am a green and white circle.</p>",
        around: {
            x: shape4Bb[1].x+myCanvasContainer.offsetLeft,
            y: shape4Bb[1].y-(Math.round((shape4Bb[1].y - shape4Bb[2].y)/2))+myCanvasContainer.offsetTop,
            w: 1,
            h: 1
        },
        position: ["after-centered","before-centered"]
    };
    
    shape1.connect("onmouseenter",function(e){
        console.log("shape1!");
        Tooltip.show(
           ...