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

Question

我定义我的引导提示是这样的：

<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> 

问题是提示不悬停showup？

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前缀在popover-trigger-template或-trigger和popover-template使得它的角UI指令，以便消除popover-会使其对角度用户界面无效/无意义。

编辑

的popover-template没有工作的原因是因为它需要一个变量作为属性值。

更换：

popover-template="myPopovertemplate.html" 

通过

popover-template="'myPopovertemplate.html'" 

添加引号中的文件名的伎俩。

我们把模板URL放在单引号中，所以它变成了一个有效的变量。这就是plunk函数中页面上的其他按钮的原因，因为它们的popover-template值是在$scope中定义的变量。

普拉克：http://plnkr.co/edit/oEA5ekXDV5DSw6yoSHMd?p=preview

希望这有助于！