Angular 2-ng-bootstrap工具提示未正确定位到混合应用

时间:2017-01-20 01:36:28

标签: angular ng-bootstrap

现在我遇到了一个我无法在plnkr中重现的问题,但基本上 - 具有内插值的ng-bootstrap工具提示没有正确定位 - 它们向下移动到右边。

see image

仅当触发模式为mouseover, mouseenter, mouseleave或这些的任意组合时,才会发生这种情况。如果它是click,那么它的位置正确。我在Angular 1.4中使用Angular 2降级组件。

我认为我已经将其缩小到需要使用ng-content的工具提示内容在初始运行时没有维度这一事实,因此我们无法正确使用这些维度放置工具提示。我的想法是在ngOnInit()中手动生成工具提示,但我不确定如何。不确定这是一个错误还是没有记录。

<template #tpl>
   hi {{play}}
</template>
<div [ngbTooltip]="tpl" container="body" placement="bottom">
  This tooltip is positioned correctly
</div>
<template #tpl2>
   hi {{play}}
</template>
<div [ngbTooltip]="tpl2" container="body" placement="bottom">
  [This tooltip is not positioned correctly][1]
</div>

其中play只是组件中定义的一些随机文本。

更实际的例子:

<template #tooltipTemplate >
  <div *ngFor="let p of data">
    <i [ngClass]="p.property1" [style.color]=" p.property2"></i>
    <span class="class1">{{p.value}}</span>
  </div>
</template>

不知何故,在打开工具提示之前它没有得到工具提示的大小,所以偏移是错误的

-edit -

使用plunker - http://plnkr.co/edit/ysDNCSbtndD4BrQhWq8g?p=preview

进行了更新

0 个答案:

没有答案