JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<div id="content">
    <table>
        <tr>
            <td>word</td>
            <td>word</td>
            <td>word</td>
            <td>word</td>
        </tr>
        <tr>
            <td>word</td>
            <td>word</td>
            <td>word</td>
            <td>word</td>
        </tr>
        <tr>
            <td>word</td>
            <td>word</td>
            <td>word</td>
            <td>word</td>
        </tr>
    </table>
</div>
<div id="popup">I'm a pop up!</div>

CSS

#content{
    display:block;
    width:100%;
    height:100%;
    border: 1px solid gray;
    clear:right;
}
table{
    width:100%;
    height:100%;
}
tr{
    width:100%;
}
td{
    border: 1px solid red;
    width:25%;
    text-align:center;
}

#popup{
    display:none;
    background-color:gray;
}
.popupFloat{
    positon:absolute;
}

JavaScript

$(document).ready(function() {
     PopUp = $('#popup');
     $.fn.TCPTooltip = function(){
        //alert("running");
        $('td').live({
            mouseenter:
                function()
                {
                    PopUp.css('display','block');
                    
                },
            mouseleave:
                function()
                {
                    //PopUp.css('display','none');
                    PopUp.removeClass('popupfloat');
                    //PopUp.html('');
                },
            click:
                function(e)
                {
                    com = ", ";
                    XPos = e.pageX;
                    YPos = e.pageY;
                    Cal = $('#content');
                    CalWidth = Cal.outerWidth();
                    CalHeight = Cal.outerHeight();
                    Day = $(this);
                    DayWidth = Day.outerWidth();
                    DayHeight = Day.outerHeight();
                    PopUp.html(XPos+com+YPos+com+CalWidth+com+CalHeight+com+DayWidth+com+DayHeight+com)
                        //PopUp.css({top : YPos, left : XPos})'
                        PopUp.addClass('popupFloat');
                        PopUp.css("top", YPos);
                        PopUp.css("left", XPos);
                }
        })
     }
     $(this).TCPTooltip();
});