JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css">
<body class="tundra">
    <table id="table1">
        <tr>
            <td>1: Cell1</td>
            <td>1: Cell2</td>
        </tr>
        <tr>
            <td>2: Cell1</td>
            <td>2: Cell2</td>
        </tr>
    </table>
</body>

CSS

table {
    border-collapse: collapse;
}

table, tr, td {
    border: 1px solid;
    padding: 10px;
}

JavaScript

require([
    "dijit/TooltipDialog",
    "dijit/popup",
    "dojo/on",
    "dojo/dom",
    "dojo/domReady!"
], function(TooltipDialog, popup, on, dom){
    var myTooltipDialog = new TooltipDialog({
        id: 'myTooltipDialog',
        style: "width: 300px;",
        content: '<p>I have a mouse leave event handler that will close the dialog. <a href="#" title="Click me!">This is also clickable</a></p>',
        onMouseLeave: function(){
            popup.close(myTooltipDialog);
        }
    });

    on(dom.byId('table1'), 'mouseover', function(){
        popup.open({
            popup: myTooltipDialog,
            around: dom.byId('table1'),
            orient:[ "after", "after", "bellow", "bellow" ]
        });
    });
});