用於突出顯示日期的工具提示CSS日期選取器

Question

我已使用JQuery UI日期選擇器顯示/突出顯示特定月份的假日期以及假日名稱顯示爲假日期間懸停時的工具提示。一切正常。

我已經添加了工具提示使用下面的代碼特定日期：

<script> 
$(document).ready(function() { 
    var dates = ['22/01/2012', '23/01/2012']; // 
     //tips are optional but good to have 
    var tips = ['some description','some other description'];  

    $('#datepicker').datepicker({     
    dateFormat: 'dd/mm/yy', 
    beforeShowDay: highlightDays, 
    showOtherMonths: true, 
    numberOfMonths: 3, 
    }); 

    function highlightDays(date) { 
    for (var i = 0; i < dates.length; i++) { 
     if (new Date(dates[i]).toString() == date.toString()) {    
      return [true, 'gazettedHoliday', tips[i]]; 
     } 
    } 
    return [true, '']; 
    } 

}); 
</script> 

但我不能添加JQuery用戶界面工具提示CSS /自定義CSS的工具提示文本添加了對假日日期。

如何向上述工具提示文本添加自定義CSS/JQueryUI工具提示。

謝謝。

Answer 1

我觀察到，只需添加標題標籤在特定的節日日期的單元格（表TD）元素，

所以我剛纔添加下列CSS和工作:)

.gazettedHoliday { 
    background: red; 
    position: relative; 
    } 
    .gazettedHoliday a { 
     background: red !important; 
     color: white !important; 
    } 

    .gazettedHoliday:hover:after { 
    background: #333; 
    background: rgba(0,0,0,.8); 
    border-radius: 5px; 
    bottom: 26px; 
    color: #fff; 
    content: attr(title); 
    left: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    min-width: 150px; 
    width: auto; 
    font-size: 12px; 
    font-weight: bold; 
    } 

    .gazettedHoliday:hover:before { 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 6px 6px 0 6px; 
    content: ""; 
    left: 50%; 
    position: absolute; 
    z-index: 99; 
    } 

Answer 2

使用本

$(function() { 
    $(document).tooltip(); 
    });