日期选择器 Bootstrap 中的工具提示出错

t9eec4r0  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(166)

只是有一个关于我的工具提示在日期选择器的问题。日历数字移动到右边,如果我添加工具提示到日期选择器。我不能重现错误与jsfiddle,但以下是代码和图片。如果我有一个工具提示看看它产生style=“left:135.208px”?

超文本标记语言

<div id="datepicker99"></div>

Java脚本语言

var datesGreen = ['3/12/2015', '4/12/2015'];
var datesYellow = ['16/12/2015', '17/12/2015', '18/12/2015'];
var datesRed = ['24/12/2015', '25/12/2015'];

$("#datepicker99").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year

if ($.inArray(formattedDate, datesGreen) != -1){
  return {
    tooltip: 'text',
    classes: 'highlight-green'
  };
}
if ($.inArray(formattedDate, datesYellow) != -1){
  return {
    classes: 'highlight-yellow'
  };
}
if ($.inArray(formattedDate, datesRed) != -1){
  return {
    classes: 'highlight-red'
  };
 }
 return;
}
});
 $('.highlight-green').tooltip({placement : 'top'});

CSS

.ui-widget{
font-size: 0.7em;
}
td.highlight {
}
td.highlight-green {
background: green!important;
color: #fff!important;
}
td.highlight-yellow {
background: yellow!important;
color: #000!important;
}
td.highlight-red {
background: red!important;
color: #fff!important;
}

和jsfiddle:
jsfiddle

83qze16e

83qze16e1#

如果您套用下列变更,它会正常运作:

$('.highlight-green').tooltip({placement : 'top', container: 'body'});

相关问题