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

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引用中,有一个popover在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

希望这有帮助!