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

    </div>

</td>


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

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;
}

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).mouseup(function(){
                $('.descricaoobs').hide();
            });
})