Tooltip-Popup, wenn Mouseover deaktiviert Daten auf Bootstrap 3 DateTimePicker v4

Question

Ich habe ein Array von deaktivierten Daten, die mit AJAX beim Laden der Seite abgerufen wird. Ich möchte jedoch ein Tooltip-Popup anzeigen, das "Promo-Datum" anzeigt, wenn die angegebenen deaktivierten Daten übermogert werden. Irgendwelche Ideen wie kann ich es tun?

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

Answer 1

Alle sind deaktiviert Daten durch die Bibliothek mit einer .disabled Klasse markiert.

Sie können eine listner für dp.show und dp.update hinzufügen und dann können Sie deaktiviert Termine mit jQuery ($('td.day.disabled')) und fügen Sie Titel Attribut (mit .attr()) erhalten nativen Tooltip ausgewählt.

Wenn Sie den Bootstrap-Tooltip verwenden möchten, rufen Sie einfach .tooltip() an. Da datetimepicker einen HTML <table> verwendet, müssen Sie data-container="body" zu Ihrem Element hinzufügen. Da die docs says:

Wenn Elemente mit Tooltips auf Elemente innerhalb eines .btn-group oder einer .input-group oder auf dem Tisch bezogen (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), haben Sie die Möglichkeit geben müssen container: 'body', um unerwünschte Nebeneffekte zu vermeiden (z. B. dass das Element breiter wird und/oder seine abgerundeten Ecken verliert, wenn der Tooltip ausgelöst wird).

Hier ist ein funktionierendes Beispiel:

$('#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>