Question

我定义了这样的bootstrap工具提示：

 <button popover-template="myPopoverTemplate.html" data-trigger="hover" popover-title="{{dynamicPopover.title}}" class="btn btn-default">Popover With Template</button>

我的模板如下所示：

<div>{{dynamicPopover.content}}</div>
<div class="form-group">
  <label>Popup Title:</label>
  <input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>

问题是工具提示在悬停时没有显示？

plunkr ref：http://plnkr.co/edit/G1Cet74mVCkVYvdXRxnX?p=preview

Answer 1

@Leeuwtje，在您附加的plunkr引用中，有一个在mouseenter事件上打开的弹出框（当您将鼠标悬停在按钮上时）。

要执行此操作的属性不是data-trigger="hover"，而是popover-trigger="mouseenter"。

此外，模板popover-template="dynamicPopover.templateUrl"作为属性添加到触发它的元素。

此外，如果您需要使用data-为属性添加前缀，请执行以下操作：

<button data-popover-template="" data-popover-trigger="" /></button>

在popover和-template中-trigger或popover-trigger前缀的popover-template使其成为角度ui指令，因此删除popover-会使它对于角度ui无效/无意义。

修改

popover-template不起作用的原因是因为它期望变量作为属性值。

更换：

popover-template="myPopovertemplate.html"

通过

popover-template="'myPopovertemplate.html'"

在引号中添加文件名就可以了。

我们将模板url放在单引号中，使其成为有效变量。这就是为什么plunk函数中页面上的其他按钮的功能，因为它们的popover-template值是$scope中定义的变量。

PLUNK ：http://plnkr.co/edit/oEA5ekXDV5DSw6yoSHMd?p=preview

希望这有帮助！

如何在悬停时显示工具提示？

1 个答案: