在UI Datepicker上突出显示日期的工具提示CSS

Question

我使用过JQuery UI Datepicker来显示/突出特定月份的假日日期以及假日名称在假期日期悬停时显示为工具提示。一切正常。

我已使用以下代码将工具提示添加到特定日期：

<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 UI ToolTip Css / Custom CSS添加到假期日期添加的工具提示文本。

如何将自定义CSS / JQueryUI工具提示添加到上方工具提示文本。

感谢。

Answer 1

使用此

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

Answer 2

我发现它只是将标题标签添加到特定假日日期单元格（表格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;
  }