gpt4 book ai didi

angularjs - 悬停时如何显示工具提示?

转载 作者:行者123 更新时间:2023-12-03 08:03:33 25 4
gpt4 key购买 nike

我这样定义了我的 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 引用: http://plnkr.co/edit/G1Cet74mVCkVYvdXRxnX?p=preview

最佳答案

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

执行此操作的属性不是 data-trigger="hover" , 但是 popover-trigger="mouseenter" .

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

此外,如果您需要在属性前加上 data- ,这样做:

<button data-popover-template="" data-popover-trigger="" /></button>
popover前缀为 -template-triggerpopover-triggerpopover-template使它成为一个 Angular ui 指令,因此删除 popover-会使它对 Angular ui 无效/毫无意义。

编辑

原因 popover-template不起作用是因为它需要一个变量作为属性值。

更换:
popover-template="myPopovertemplate.html"

经过
popover-template="'myPopovertemplate.html'"

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

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

插入 : http://plnkr.co/edit/oEA5ekXDV5DSw6yoSHMd?p=preview

希望这有帮助!

关于angularjs - 悬停时如何显示工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31333038/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com