부트 스트랩 3에서 mouseover가 비활성화 된 경우 툴팁 팝업 DateTimePicker v4

Question

페이지로드시 AJAX를 사용하여 가져온 사용 중지 된 날짜 배열이 있습니다. 그러나 지정된 비활성화 날짜가 마우스 오버 될 때 "프로모션 날짜"를 보여주는 툴팁 팝업을 표시하고 싶습니다. 어떤 아이디어라도 어떻게 할 수 있습니까?

$('#PickDate').datetimepicker({ 
    useCurrent: false, 
    showTodayButton: true, 
    minDate: parsedDate, 
    defaultDate: startDate, 
    format: 'DD MMM YYYY', 
    disabledDates: dDatesArray, 
    daysOfWeekDisabled: [0, 6] 
}); 

Answer 1

모든 비활성 날짜는 .disabled 클래스의 라이브러리로 표시됩니다.

당신은 dp.show 및 dp.update에 대한 청취자를 추가 할 수 있습니다 그리고 당신은 jQuery를 ($('td.day.disabled'))와 함께 사용할 수 날짜를 선택할 수 있으며, 기본 툴팁을 얻기 위해 (.attr() 사용) title 속성을 추가합니다.

부트 스트랩 툴팁을 사용하려면 .tooltip()으로 간단히 전화하십시오. datetimepicker는 HTML <table>을 사용하기 때문에 요소에 data-container="body"을 추가해야합니다. 는 docs says으로 :

.btn-group 또는 .input-group, 또는 테이블 관련 요소 (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>)에 내 요소에 툴팁을 사용하여, 당신은 옵션을 지정해야합니다 container: 'body'을 사용하여 원하지 않는 부작용 (예 : 도구 설명이 확대 될 때 요소가 넓어 지거나 둥근 모서리가 지워짐)를 피하십시오. 여기

작동 예 :

$('#PickDate').datetimepicker({ 
 
    useCurrent: false, 
 
    showTodayButton: true, 
 
    //minDate: parsedDate, 
 
    //defaultDate: startDate, 
 
    format: 'DD MMM YYYY', 
 
    //disabledDates: dDatesArray, 
 
    daysOfWeekDisabled: [0, 6] 
 
}).on('dp.show dp.update', function(){ 
 
    $('td.day.disabled').each(function(index, element){ 
 
    var $element = $(element) 
 
    $element.attr("title", "Promo Date"); 
 
    
 
    $element.data("container", "body"); 
 
    $element.tooltip() 
 
    }); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="input-group date" id="PickDate"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div>