悬停时如何显示工具提示? [英] how to show tooltip when hovering?

问题描述

我这样定义了我的引导工具提示:

I defined my bootstrap tooltip like this:

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

问题是工具提示不会在悬停时显示吗?

Problem is the tooltip does not showup on hover?

plunkr参考: http://plnkr.co/edit/G1Cet74mVCkVYvdXRxnX?p=preview

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

推荐答案

@Leeuwtje，在您附加的plunkr参考中，当mouseenter事件(将鼠标悬停在按钮上时)中打开了一个弹出窗口.

@Leeuwtje, in the plunkr reference that you have attached, there is a popover that is opening on mouseenter event (when you hover the mouse over the button).

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

The attribute to do that is not data-trigger="hover", but popover-trigger="mouseenter".

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

Also, for the template popover-template="dynamicPopover.templateUrl" is added as an attribute to the element that triggers it.

此外，如果您需要为属性加上 data-前缀，请按以下步骤进行操作:

Also, if you need to prefix the attributes with data-, do them like this:

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

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

The popover prefixed to -template or -trigger in popover-trigger and popover-template makes it an angular ui directive, so removing popover- would make it invalid / meaningless to angular ui.

编辑

popover-template 不起作用的原因是因为它希望将变量作为属性值.

The reason the popover-template did not work is because it expects a variable as the attribute value.

替换:

popover-template="myPopovertemplate.html"

作者

popover-template="'myPopovertemplate.html'"

在引号中添加文件名就可以解决问题.

Adding the filename in quotes does the trick.

我们将模板网址放在单引号中，因此它成为有效变量.这就是插入功能中页面上其他按钮的原因，因为它们的 popover-template 值是在 $ scope 中定义的变量.

We put the template url in single quotes so it becomes a valid variable. That is why the other buttons on the page in the plunk function, because they have the popover-template value to be variables that are defined in $scope.

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

希望这对您有帮助！

这篇关于悬停时如何显示工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！