JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div><div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div><div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div>
    <div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div>

CSS

div {
    width: 22%;
    height: 10em;
    float: right;
    display: inline-block;
    background-color: #f0f0f0;
    margin-left: 2.5%;
    margin-bottom: 4.5%;
    position: relative;
}

.get-info {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid #ccc;
    background-color: #FF4136;
    width: 60px;
    padding: 10px 0;
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 1px;
    color: #f0f0f0;
}
.get-info:hover {
    cursor: pointer;
}

.info {
    display: none;
    width: 300px;
    background-color: #fff;
    font-family: Helvetica;
    font-weight: none;
    padding: 30px;
    border: 1px solid #ccc;
    position: absolute;
    right: 10px;
    top: 32px;
    overflow: hidden;
    z-index:100000;
    color:#666;
    font-weight:bold;
    line-height: 1.4em;
}

JavaScript

var btns = document.getElementsByClassName('get-info');
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('mouseover', showDetails, false);
    btns[i].addEventListener('mouseout', hiddenDetails, false);
    btns[i].nextElementSibling.addEventListener('mouseover', showParagraph, false);
    btns[i].nextElementSibling.addEventListener('mouseout', hideParagraph, false);
}

function showDetails() {
    target = this.nextElementSibling;
    target.style.display = "inline-block";
    var myLeft = getOffsetLeft(target);
    if(myLeft < 0) {
        target.style.right = myLeft + "px";        
    }
}

function hiddenDetails() {
    this.nextElementSibling.style.display = "none";
}

function showParagraph () {
    this.style.display = "inline-block";
}

function hideParagraph () {
    this.style.display = "none";
} 

function getOffsetLeft( elem ) {
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}