UI Bootstrap datepicker - 每天添加工具提示（ui bootstrap tooltip）答案

【问题标题】：UI Bootstrap datepicker - adding tooltip (ui bootstrap tooltip) for every dayUI Bootstrap datepicker - 每天添加工具提示（ui bootstrap tooltip）
【发布时间】：2016-04-25 13:08:32
【问题描述】：

我试图通过将 uib-tooltip 的属性添加到 Datepicker 来做到这一点，但在我看到代码后，我发现这不是正确的方法...... 有人有这样做的想法吗？非常感谢！！

【问题讨论】：

你试过什么？您可以发布最小的可行示例（一些重现您的问题的代码）或小提琴/plunker 吗？还有为什么它不是“正确的”，？
这是 html 代码
Inline

这是 $scope.options: $scope.options = { customClass: getDayClass, minDate: new Date( ), showWeeks: false, uibTooltip:"bla bla" };

标签： datepicker angular-ui-bootstrap

【解决方案1】：

我自己从来没有这样做过，但我认为你可以覆盖默认的日期选择器模板并在那里添加一个工具提示

他们可以在here找到。

然后您可以转到day view template 并在ng-repeat="dt in row" 旁边添加一个工具提示

<td ng-repeat="dt in row" uib-tooltip="hello tooltip"class="uib-day text-center" role="gridcell"
    id="{{::dt.uid}}"
    ng-class="::dt.customClass">
    <!--<button type="button" class="btn btn-default btn-sm"
      uib-is-class="
        'btn-info' for selectedDt,
        'active' for activeDt
        on dt"
      ng-click="select(dt.date)"
      ng-disabled="::dt.disabled"
      tabindex="-1"><span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span></button>-->
</td>

如果您使用的是 ui-bootstrap 的缩小版，您将不得不自己操作一些组件的源代码并自己缩小它

【讨论】：

非常感谢！！但是，有一种方法可以链接 uib-tooltip 的属性，而不是覆盖原始代码？我更喜欢这个，因为这样你可以更轻松地更新 uib-datepicker 的包。
您不能“链接”，您必须将工具提示添加到当天的确切标记中，因此您必须修改模板，但您实际上不需要覆盖任何内容, datepicker 具有 template-url 属性，您可以在其中链接（和覆盖）您自己的自定义模板。
有效！！顺便说一句，uib-tooltip 属性应该在按钮标签旁边，而不是标签
好吧，我只是在猜测，它看起来是解决它的最佳（也是唯一）方法。 :)

Inline