JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
        <!-- Info DIVS -->
        <div data-idx="1">Info 1</div>
        <div data-idx="2">Info 2</div>
        <div data-idx="3">Info 3</div>

        <!-- Info Tables -->
        <table><tr><td>table 1</td></tr></table>
        <table><tr><td>table 2</td></tr></table>
        <table><tr><td>table 3</td></tr></table>
    <div>

CSS

table {
    display: none;
}

div > div {
    cursor: pointer;
    display: inline-block;
    margin: 10px;
}

JavaScript

(function(){
    var container = document.getElementById('container');
    var tables = document.getElementsByTagName('table');
    var currentlyVisible = null;

    container.addEventListener('mouseover', function(e) {
        var idx;
        if (e.target.hasAttribute('data-idx')) {
            if (currentlyVisible) {
                currentlyVisible.style.display = 'none';
            }
            idx = parseInt(e.target.getAttribute('data-idx'), 10) - 1
            currentlyVisible = tables[idx];
            currentlyVisible.style.display = 'block';
        }
    });
    container.addEventListener('mouseout', function(e) {
        if (currentlyVisible) {
            currentlyVisible.style.display = 'none';
        }
    });
}())