JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<div class="checkBoxTips"> 
<table style="width:1149px;" id="tblPrestacao" class="cell-border table-bordered tblCompleta table-responsive">
                <thead>
                    <tr bgcolor="#F1F1F1">
                        <th><p align="center">UF</p></th>
                        <th><p align="center">Entidade</p></th>
                        <th><p align="center">Tipo</p></th>
                        <th><p align="center">1</p></th>
                        <th><p align="center">2</p></th>
                        <th><p align="center">3</p></th>
                        <th><p align="center">4</p></th>
                        <th><p align="center">5</p></th>
                        <th><p align="center">6</p></th>
                        <th><p align="center">7</p></th>
                        <th><p align="center">8</th>
                        <th><p align="center">9</p></th>
                        <th><p align="center">10</p></th>
                        <th><p align="center">11</p></th>
                        <th><p align="center">12</p></th>
                        <th><p align="center">Responsável</p></th>
                        <th><p align="center">Observação</p></th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
        <td style="width: 10px"><font size="2"> <b>GO</b></font></td>
        <td style="width: 250px">
            <font size="2">
                <a class="btnEditCliente" href="#" title="Editar Cliente">C&#226;mara de Castanhal</a>
            </font>
        </td>
        <td style="width: 10px"><font size="2"> <b>A</b></font></td>
            <td bgcolor="gren"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bJaneiro é obrigatório." name="[0].Mes.bJaneiro" type="checkbox" value="true" /><input name="[0].Mes.bJaneiro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="gren"><font size="1"><b><input...

CSS

.checkBoxTips input {
    display: block;
}
#CheckBoxPopover {
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;    
}

JavaScript

$(function () {
    // create a single access point for your popover
    var $pop = $("#CheckBoxPopover");
    
    $('.checkBoxTips input').click(function (e) {
        setPopover(this);
        e.stopPropagation();
    });
    
    $(document).click(function () {
        $pop.hide();
    });
    
    function setPopover(element) {
        setPopoverPosition(element);
        if ($(element).is(":checked")) {
            var title = $(element).attr("title");
            $pop.find("h3.popover-title").text(title);
            $pop.show();
        } else {
            var $checkedBoxes = $('.checkBoxTips input:checked')
            if ($checkedBoxes.length >0) {
                setPopover($checkedBoxes[0]);
            } else {
                $pop.hide();
            }
        }
    }
    
    function setPopoverPosition(element) {
        var offset = $(element).offset();
        $pop.css('left',offset.left + 20);
        $pop.css('top',offset.top - 25);
    }
});