Переопределить стили для отключений дат в eonasdan-datetimepicker

Question

Я хотел бы переопределить стили по умолчанию для «eonasdan-datetimepicker» (https://github.com/Eonasdan/bootstrap-datetimepicker), отображающие сообщение с основным наведением. По датам по умолчанию отключено использует этот CSS атрибуты:

.bootstrap-datetimepicker-widget table td span.disabled, 
.bootstrap-datetimepicker-widget table td span.disabled:hover { 
    background: none; 
    color: #777777; 
    cursor: not-allowed; 
} 

.bootstrap-datetimepicker-widget table th.disabled, 
.bootstrap-datetimepicker-widget table th.disabled:hover { 
    background: none; 
    color: #777777; 
    cursor: not-allowed; 
} 

.bootstrap-datetimepicker-widget table td span.disabled, 
.bootstrap-datetimepicker-widget table td span.disabled:hover { 
    background: none; 
    color: #777777; 
    cursor: not-allowed; 
} 

Я хотел бы, чтобы отобразить основное сообщение парения с атрибутом заголовка. Моя текущая попытка вообще не работает, я помещаю этот код в функцию document.ready.

if ($(".bootstrap-datetimepicker-widget").attr('th, td, span', 'disabled') == 'true') 
    { 
     $(".bootstrap-datetimepicker-widget").attr('title', 'This date is disabled'); 
    } 

Спасибо

Answer 1

Вот вариант CSS: -

Открыть в целой странице

td.day{ 
 
    position:relative; 
 
} 
 

 
td.day.disabled:hover:before { 
 
    content: 'This date is disabled'; 
 
    color: red; 
 
    background-color: white; 
 
    top: -22px; 
 
    position: absolute; 
 
    width: 136px; 
 
    left: -34px; 
 
    z-index: 1000; 
 
    text-align: center; 
 
    padding: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
 
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 
 

 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<div style="overflow:hidden;"> 
 
    <div class="form-group"> 
 
     <div class="row"> 
 
      <div class="col-md-8"> 
 
       <div id="datetimepicker"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     $(function() { 
 
      $('#datetimepicker').datetimepicker({ 
 
       inline: true, 
 
       sideBySide: true, 
 
       daysOfWeekDisabled: [0, 6] 
 
      }); 
 
     }); 
 
    </script> 
 
</div>