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

I defined my bootstrap tooltip like this:

我定义了我的bootstrap工具提示,如下所示:

 <button popover-template="myPopoverTemplate.html" data-trigger="hover" popover-title="{{dynamicPopover.title}}" class="btn btn-default">Popover With Template</button>

my template looks like this:

我的模板看起来像这样:

<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 ref:http://plnkr.co/edit/G1Cet74mVCkVYvdXRxnX?p=preview

1 个解决方案

#1

@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).

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

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

这样做的属性不是data-trigger =“hover”,而是popover-trigger =“mouseenter”。

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

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

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

此外,如果您需要使用data-为属性添加前缀,请执行以下操作:

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

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-trigger和popover-template中以前缀为-template或-trigger的popover使其成为一个有角度的ui指令,因此删除popover会使它对angular ui无效/无意义。

EDIT

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

popover-template不起作用的原因是因为它期望变量作为属性值。

Replacing :

popover-template="myPopovertemplate.html"

popover-template="'myPopovertemplate.html'"

Adding the filename in quotes does the trick.

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

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.

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

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

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

Hope this helped!

希望这有帮助!

#1