calendar_info

by Daniel Gasser

HTML

<div class="day-date day-reserved-date">
<!-- ... -->
    <div class="free-bed" id="free-bed_2015_07_15">11/16</div>
    <div class="free-beds-more">13. August 2015<br>Freie Betten: 11/16</div>
    <div class="loading-day" style="display: none;">
    <!-- ... -->
   
</div>

CSS

.free-beds-more {
    display: none;
}
.raw-day .day-reserved-date {

    border: 1px solid #9b280b;

    padding: 2px 0 0 0;

    margin-bottom: 2px;

}

.day-date {

    border: 1px solid #9b280b;

    padding: 2px 0 0 0;

    text-align: left;

    min-height: 30px;

}

JavaScript

$( document ).on('mouseover', '.day-date', function() {
  $('.free-beds-more').stop().slideDown(500);
    return false;
});
$( document ).on('mouseout', '.day-date', function() {
  $('.free-beds-more').stop().slideUp(500);

});