JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="bob" class="ch-grid">
    <li id="frank">
        <div id="george" class="bioinfo">
             <h2>You are hovering over a bullet point</h2>
        </div>
    </li>
</ul>

CSS

.ch-grid{background:wheat;width:40%;margin-top:50px;}
#bob{background:yellow;}
#frank{background:cyan;}
.bioinfo {
    display: none;
    max-height: auto;
    max-width: 220px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgba(108, 108, 108, 0.5) 5px 5px 5px;
    border: 2px solid #ccc;
    position: absolute;
    top: 10px;
    right: -50px;
    z-index: 100;
    /*    background: #eeeded; f6f6f6*/
    background: rgba(246, 246, 246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: left;
}

JavaScript

$('.ch-grid > li').hover(
        function () {
            //hover IN
            //alert( $(this).attr('id') );
            $(this).css({position: 'relative', marginRight: 120});
            $(this).children('.bioinfo').show();
        }, 
        function () {
            //hover OUT
            $(this).css({position: 'relative', marginRight: 0});
            $('.bioinfo').hide();
        }
    );