JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="utf-8" ?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>
        
        <!-- import css files -->
        <link href="example.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="tree-view">
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
  ...

CSS

#wrapper
{
}

#tree-view
{
    float: left;
    width: 200px;
    height: 400px;
    background-color: #BBFFFF;
    overflow: auto;
    overflow-x:hidden
}

#main-content
{
    float: left;
    width: 600px;
    height: 400px;
    background-color: #FFFFBB;
}

#tree-view a
{background-color:#ff0000;
    
    display: block;
    position: relative;
}

#tree-view a span.tooltip
{
    position: absolute;
    z-index: 100;
    display: none;
    top:0;
    left:0
}

#tree-view a:hover span.tooltip
{
    /* positioning */
    margin-left: 1em;
    margin-top: 1em;
    display: block;
    position: absolute;
    
    /*formatting*/
    text-decoration: none;
    background: #DDD;
    border: 1px solid #BBB;
    padding: 5px;
    white-space: normal;
    width: 300px;
    color: black;
}

#tree-view .tooltip strong
{
    display: block;
}

#tree-view .tooltip .tooltip-info
{
    display: block;
}