angularjs – 如何在悬停时显示工具提示?
我定义了这样的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
@Leeuwtje,在你附加的plunkr引用中,有一个popover在mouseenter事件上打开(当你将鼠标悬停在按钮上时).
这样做的属性不是data-trigger =“hover”,而是popover-trigger =“mouseenter”. 此外,对于模板,popover-template =“dynamicPopover.templateUrl”作为属性添加到触发它的元素. 此外,如果您需要使用data-为属性添加前缀,请执行以下操作: <button data-popover-template="" data-popover-trigger="" /></button> 在popover-trigger和popover-template中以-template或-trigger为前缀的popover使它成为一个有角度的ui指令,因此删除popover会使它对angular ui无效/无意义. 编辑 弹出模板不起作用的原因是因为它期望变量作为属性值. 更换: popover-template="myPopovertemplate.html" 通过 popover-template="'myPopovertemplate.html'" 在引号中添加文件名就可以了. 我们将模板url放在单引号中,使其成为有效变量.这就是为什么plunk函数中页面上的其他按钮的原因,因为它们将popover-template值作为$scope中定义的变量. PLUNK:http://plnkr.co/edit/oEA5ekXDV5DSw6yoSHMd?p=preview 希望这有帮助! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |