JSFiddle - React, Tailwind, and code Playground

HTML

<table class="calendar">
    <tr>
        <th>ПН</th>
        <th>ВТ</th>
        <th>СР</th>
        <th>Чт</th>
        <th>ПТ</th>
        <th>СБ</th>
        <th>ВС</th>
    </tr>
    <tr>
        <td>
            <div>
                <div class="note1" data-title="Первая запись (01.02.2014)<br>Текст первой записи."></div>
                <div class="note2" data-title="Вторая запись (01.02.2014)<br>Текст первой записи."></div>
                <div class="note3" data-title="Третья запись (01.02.2014)<br>Текст первой записи."></div>
                <div class="note4" data-title="Четвертая запись (01.02.2014)<br>Текст первой записи."></div>
            </div>
            <span>
                <span>01</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>02</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>03</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>04</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>05</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>06</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>07</span>
                <span class="vh"></span>
            </span>
        </td>
    </tr>
    <tr>
        <td>
            <span>
                <span>08</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <span>
                <span>09</span>
                <span class="vh"></span>
            </span>
        </td>
        <td>
            <div>
                <div class="note1"...

CSS

th{
    
}
td{
    width:40px;
    height:40px;
    border:1px solid #bbbbbb;
    text-align:center;
    vertical-align:top;    
}
td>div{
    position:absolute;
    width:40px;
    height:40px;
    opacity:0.5;
}
span.title{
    position:fixed;
    top:0px;
    left:0px;
    max-width:100%;
    background:#ffffff;
    border:1px solid #bbbbbb;
    z-index:10;
    overflow:hidden;
    display:none;
    font-size:12px;
}
td>span{
    display:inline-block;
    width:40px;
    height:40px;
}
td>span>span{
    display:inline-block;
    vertical-align:middle;
}
td>span>span.vh{
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
}
.note1{
    position:absolute;
    left:0px;
    top:0px;
    width:40px;
    height:40px;
    background:rgb(255,0,0);
    cursor:pointer;
}
.note2{
    position:absolute;
    left:20px;
    top:0px;
    width:20px;
    height:40px;
    background:rgb(0,255,0);
    cursor:pointer;
}
.note3{
    position:absolute;
    left:0px;
    top:20px;
    width:40px;
    height:20px;
    background:rgb(0,0,255);
    cursor:pointer;
}
.note4{
    position:absolute;
    left:20px;
    top:20px;
    width:20px;
    height:20px;
    background:rgb(0,255,255);
    cursor:pointer;
}

JavaScript

$(document).ready(function()
{
    $('.note1,.note2,.note3,.note4').hover(function()
    {
        $('span.title').html($(this).attr('data-title'));
        $(this).parent().offset().top;
        $(this).parent().offset().left;
        $('span.title').css({'top':($(this).parent().offset().top+40)+'px','left':$(this).parent().offset().left+'px','display':'block'});
    },function()
    {
        $('span.title').html('').css({'display':'none'});
    });
});