JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width:100%" border="1">
    <tr>
        <td>id</td>
        <td>obs</td>
        <td>Teste1</td>
        <td>Teste2</td>
        <td>Teste3</td>
        <td>Teste4</td>
        <td>Teste5</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>
            <div class='botao_melhor_leitura'>
                <button type="button">Clique aqui</button>
                <div class='descricaoobs'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat qua. <span class="fechar"> (fechar)</span>

                </div>
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
    </tr>
</table>

CSS

.descricaoobs {
     overflow-y:hidden;
     border: #999999 solid 1px;
     background-color:#F8F8FF;
     position:center;
     padding:1px 3px;
     position: absolute;
     display: none;
     text-align: left;
     font-size:12px;
 }
 .fechar:hover {
     cursor: pointer;
     color: red;
 }

JavaScript

function abreConteudo(element) {
    alert($(element).attr('class'));
    alert($(element > "div.descricaoobs").text());
}

$(document).ready(function () {
    $("div.botao_melhor_leitura").click(function (e) {
        $(this).find(".descricaoobs").attr('style', 'display:block;');

        var mousex;
        var estado = $(this).find(".descricaoobs").attr('class');
        /*var tipVisX = $(window).width();*/
        $(this).find(".descricaoobs").css({
            right: mousex
        });
    })
})

$(document).on('click', function (e) {
    var el = $(e.target);
    if (el.hasClass('fechar') || !el.closest('.botao_melhor_leitura').length) $('.descricaoobs').hide();

});